将 css 应用于使用 Vue.js 动态创建的表行

Question

所以我有一个表，其中的行是使用 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>

然后，使用 jQuery，我想隐藏具有类“名称”的列，但是当我制作时

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

只有标题消失。我想这是因为该行是动态生成的，但是我该如何处理呢？

我试过了：

1. 使用该类对所有元素创建 each() 函数，
2. 编写像.css('display','none') 这样的脚本，而不是hide()

但这没有帮助。奇怪，但 each() 中的 alert() 每次应该触发时都会触发，但 hide() 会忽略添加的元素

更具体的数据： 表本身：

<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>

点击按钮调用函数

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

该函数是从另一个函数调用的，该函数在 v-on:click 上调用

Answer 1

jQuery 与 Vue 动态创建的表一起工作得很好。检查这个小提琴：https://jsfiddle.net/crabbly/9o69f2yr/

我相信问题在于您的应用程序的加载方式、过滤器等。

根据您尝试访问表行的方式，您可能希望在查询之前确保 DOM 已完全更新。你可以使用 Vue 的 nextTick (http://vuejs.org/api/#Vue-nextTick)。 在您的 Vue 方法中，在您尝试隐藏行之前，在您的示例中，调用 getJsonForStats 方法，您可以这样做

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

Answer 2

假设是因为您对<th> 和<td> 使用了同一个类

尝试<th class="name-th"> 然后$(".name-th").hide(); $(".name").hide(); 也许会有所帮助

UPD：

我不知道..这段代码运行良好：

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