Applying css to the table row dynamically created with Vue.js

0
votes

So I have table, where rows are created dynamically using v-for:

<table>
  <tr><th class='name'>Name</th><th>Surname</th></tr>
  <tr v-for='data in datas'><td class='name'>@{{data.name}}</td><td>@{{data.surname}}</td></tr>
</table>

And then, using jQuery, I want to hide the column with class 'name', but when I make

$('.name').hide();

Only header disappears. I suppose it's because the row is made dynamically, but how could I handle this?

I've tried:

  1. making each() function on all elements with this class,
  2. writing script like .css('display','none'), not hide()

but it didn't help. Strange, but alert() in each() fires each time it should, but hide() ignores added elements

More concrete data: the table itself:

<table class="striped bordered responsive">
     <thead>
         <tr><th class="stat-table-creatives" colspan="2">Creative info</th><th>Impressions</th><th>Clicks</th><th>CTR</th><th>CPC</th><th>Price per unit</th><th>Sum</th><th class="stat-table-date">Date</th></tr>
      </thead>
      <tbody>
         <tr v-for="stat in stats"><td class="stat-table-creatives">@{{ stat.creativeTitle }}</td><td class="stat-table-creatives">@{{ stat.creativeType }}</td><td>@{{ stat.impressions }}</td><td>@{{ stat.clicks }}</td><td>@{{ stat.ctr }}</td><td>@{{ stat.cpc }}</td><td>@{{ stat.client_price }}</td><td>@{{ stat.sum }}</td><td class="stat-table-date">@{{ stat.date }}</td></tr>
      </tbody>
</table>

function called on button click

getJsonForStats: function(filters){
    if((filters[0]=='creative')||(filters[1]=='creative')){
        $('.stat-table-creatives').show();
    } else {
        $('.stat-table-creatives').hide();
    }
    if((filters[0]=='date')||(filters[1]=='date')){
        $('.stat-table-date').show();
    } else {
        $('.stat-table-date').hide();
    }
});

The function is called from another function, which is called on v-on:click

2
javascriptjqueryhtmlcssvue.js
Why don't you add a CSS definition like so .name { display: none; } – aifrim
@aifrim I need this column to be shown when document loads, and to hide it on button click – Coffee
Ok then this $("#hide-button").click(function() { $(".name").hide(); }); applied at domready should work :) – aifrim
Have you tried $("#TableID .name").hide(); – Matin Kajabadi
@aifrim but it doesn't – Coffee

2 Answers

0
votes

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
votes

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();
    });
});