應用CSS與Vue.js動態創建的錶行

所以我已經表，其中行動態使用V-用於創建：應用CSS與Vue.js動態創建的錶行

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

只有標題消失。我想這是因爲這個行是動態生成的，但我怎麼處理呢？

我已經試過：

使得與這個類的所有元素每（）函數，
寫劇本一樣.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上調用：點擊

來源

2016-05-17 Coffee

你爲什麼不加入CSS的定義，像這樣'。名稱{顯示：無; }' – aifrim

@aifrim我需要這個列當文檔加載時顯示，並將其隱藏在按鈕上點擊 – Coffee

好吧，然後這個'$（「＃hide-button」）。點擊（函數（）{（「。name」）。hide（）; }）;'在'domready'應用應該工作:) – aifrim

-1

想這是因爲你使用相同的類<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(); 
    }); 
});

來源

2016-05-17 14:28:17 BodyaK

這是一樣的，如果我用'th.name '和'td.name'選擇器，我也試過並沒有成功 – Coffee

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

來源

2016-05-17 22:03:05 crabbly

應用CSS與Vue.js動態創建的錶行

回答

相關問題