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，我想用类＆＃39; name＆＃39;隐藏列，但是当我做

时

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

只有标题消失。我想它是因为行是动态制作的，但我怎么能处理呢？

我试过了：

使用此类在所有元素上创建each（）函数，
编写.css('display','none')之类的脚本，而不是hide()

但它没有帮助。很奇怪，但alert()中的each()每次都会触发，但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上调用：单击

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

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

2 个答案: