[Vuejs]-Applying css to the table row dynamically created with Vue.js

by

0👍

jQuery works just fine with Vue dynamically created table. Check this fiddle: https://jsfiddle.net/crabbly/9o69f2yr/

I believe the problem will be on how your application is loading, your filters, etc.

Depending on how you are trying to access the table rows, you may want to make sure that DOM is completely updated before querying it. You can use Vue’s nextTick (http://vuejs.org/api/#Vue-nextTick).
Inside your Vue method, before you try to hide the rows, in your example, calling getJsonForStats method, you can do 

this.$nextTick(function() {
   //DOM updated and ready to rock and roll
   this.getJsonForStats(..your filter params...);
}

-1👍

suppose it’s because you use the same class for <th> and <td>

try <th class="name-th"> and then $(".name-th").hide(); $(".name").hide();
maybe it will help

UPD:

I don’t know.. this code is working perfectly:

<table id="tab" border='1'>
                <tr><th class='name'>Name</th><th>Surname</th></tr>
                <tr><td class='name'>n</td><td>s</td></tr>
</table>
<input id="click" type="button" value="Hide" />

js:

$(document).ready(function(){
    $("#click").click(function(){
        $("#tab").find(".name").hide();
    });
});

Leave a comment