Vue component doesn’t work inside table

  • Resolved mjjinvincible

    (@mjjinvincible)


    6 years, 3 months ago

    Hey @supsysticcom, first of all thank you for all the hard work. The plugin is great.

    I am inserting a Vue component via a WordPress shortcode in a cell of a table, and all the JS listeners attached to the component (click on buttons, etc.) don’t seem to work.

    Could this be something related to the JavaScript in the plugin that is messing with the JavaScript of contained elements?

    You can see the component (quantity decrement/increment) inside the table (not working), and also the same component outside, right on top of the table (properly working).

    Thank you!

    • This topic was modified 6 years, 3 months ago by mjjinvincible.
Viewing 3 replies - 1 through 3 (of 3 total)
  • Thread Starter mjjinvincible

    (@mjjinvincible)

    One workaround is waiting until the table has fully loaded or setting a timeout when creating the Vue object:

    setTimeout(function() {
    new Vue( {
        el: '#app',
        components: {
            CartQuantity,
            CartPurchase,
        },
    } );

}, 5000);

    Is there any way I can “Execute JS Script After Table Load” globally instead of per-table?

    Thank you again!

    Plugin Author supsystic

    (@supsysticcom)

    Hello, @mjjinvincible
    For each table, 2 events are initialized:
    – beforeInitializeTable – prior to initializing the table on the page;
    – beforeShowTable – after full initialization of the table before displaying it on the page;
    I suggest you use the beforeShowTable event.
    To apply the same code for each table – for example, you can write the following in the theme code (in the file that loads on all pages with tables):

    var tables = $('.supsystic-table');

if(tables.length) {
 tables.each(function () {
  $(this).on('beforeShowTable', function() {
   new Vue( {
    el: '#app',
    components: {
     CartQuantity,
     CartPurchase,
    },
   } );
  });
 });
}
    Thread Starter mjjinvincible

    (@mjjinvincible)

    That works great. Thank you for sharing the code snippet.

    Cheers!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Vue component doesn’t work inside table’ is closed to new replies.