vueJS隱藏在動態錶行

元素我有一個表，看起來像這樣：vueJS隱藏在動態錶行

<table class="table"> 
    <thead> 
    <tr> 
     <td><strong>Title</strong></td> 
     <td><strong>Job</strong></td> 
     <td></td> 
    </tr> 
    </thead> 
    <tbody> 
    <tr v-for="(row, index) in rows"> 
     <td><p class="title">My title</p></td> 
     <td><input type="text" v-model="row.job"></td> 
     <td><a @click="title()">Remove title</a></td> 
    </tr> 
    </tbody> 
</table>

現在我不知道我怎麼能在<p class="title">My title</p>切換一個jQuery .hide()被點擊了刪除標題鏈接時。我不想使用v-show，因爲我想了解如何在vueJS中動態生成的行內定位元素。

的問題是，有我的表中的許多行，以便每一個標題標籤必須有一個潮頭類，我不明白我怎麼能隱藏在動態生成行特定的標題

來源

2017-10-19 Kiow

可以做到使用v-show這樣指示。

new Vue({ 
 
    el: '.table', 
 
    data: { 
 
    rows: [ 
 
     { showTitle: true, job: 'A' }, 
 
     { showTitle: true, job: 'B' }, 
 
     { showTitle: true, job: 'C' } 
 
    ] 
 
    } 
 
});

<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script> 
 

 
<table class="table"> 
 
    <thead> 
 
    <tr> 
 
     <td><strong>Title</strong></td> 
 
     <td><strong>Job</strong></td> 
 
     <td></td> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr v-for="(row, index) in rows"> 
 
     <td><p v-show='row.showTitle' class="title">My title</p></td> 
 
     <td><input type="text" v-model="row.job"></td> 
 
     <td><a @click="row.showTitle = false">Remove title</a></td> 
 
    </tr> 
 
    </tbody> 
 
</table>

編輯：

這裏是jQuery的版本，但正如我已經說過，這是一個不好的做法。

new Vue({ 
 
    el: '.table', 
 
    data: { 
 
    rows: [ 
 
     { job: 'A' }, 
 
     { job: 'B' }, 
 
     { job: 'C' } 
 
    ] 
 
    }, 
 
    methods: { 
 
    hideTitle(index) { 
 
     $(this.$refs['title' + index]).hide(); 
 
    } 
 
    } 
 
});

<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script> 
 
<script src="https://unpkg.com/[email protected]/dist/jquery.min.js"></script> 
 

 
<table class="table"> 
 
    <thead> 
 
    <tr> 
 
     <td><strong>Title</strong></td> 
 
     <td><strong>Job</strong></td> 
 
     <td></td> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr v-for="(row, index) in rows"> 
 
     <td><p class="title" :ref="'title' + index">My title</p></td> 
 
     <td><input type="text" v-model="row.job"></td> 
 
     <td><a @click="hideTitle(index)">Remove title</a></td> 
 
    </tr> 
 
    </tbody> 
 
</table>

來源

2017-10-19 23:48:57

謝謝你的例子。但我想知道如何以jQuery的方式來做到這一點，以及我可以如何定位被點擊的行內的元素。 – Kiow

如果我只知道如何獲得被點擊的行，並且我可以應用其他內容，例如更改行內的文本標籤等。 – Kiow

混合Vue和jQuery應該被認爲是不好的做法。 –

有條件地顯示，你可以使用V-顯示指令，文檔鏈接在這裏： v-show doucment。

希望這可以對你有所幫助！

來源

2017-10-20 00:45:11 flypan

感謝您的提示。但我想知道如何以jQuery的方式來做到這一點，以及我可以如何定位被點擊的行內的元素。 – Kiow

如果我只知道如何獲得被點擊的行，並且我可以應用其他內容，例如更改行內的文本標籤等。 – Kiow

您可以使用$ event.target來定位已被單擊的元素。 – flypan

試試這個。有用。使用V-f和標題模型

模板

<table class="table"> 
    <thead> 
    <tr> 
     <td><strong>Title</strong></td> 
     <td><strong>Job</strong></td> 
     <td></td> 
    </tr> 
    </thead> 
    <tbody> 
    <tr v-for="(row, index) in rows"> 
     <td v-if="title === false"><p class="title">My title</p></td> 
     <td><input type="text" v-model="row.job"></td> 
     <td><a @click="title()">Remove title</a></td> 
    </tr> 
    </tbody> 
</table>

腳本

data() { 
     title:false, 
}, 


methods: { 
title(){ 

     this.title= true 
} 
}

來源

2017-10-20 03:05:50 Kenneth

但這和''v-show''很相似我想知道如何使用jquery隱藏標題？或多或少，我如何針對該行中的特定元素。數據是動態的，所以可能有多行，這意味着我不能使用類標識符 – Kiow

正如其他人所說，混合jQuery和Vue公司是不是最好的主意。但是，如果你必須的話，你可以使用@flypan提到的event.target以及一些jQuery選擇器來獲得你想要的。

我放在一起的jsfiddle使用HTML作爲什麼可以做一個例子：

new Vue({ 
    el: '#app', 
    data: { 
    rows: [ 
     { job: 'A' }, { job: 'B' } 
    ] 
    }, 
    methods: { 
    title: function() { 
     $title = $(event.target).parent().parent().find("p"); 
     $($title).hide(); 
    } 
    } 
});

你可能會想收緊選擇找「P」，但是這只是一個例子。這裏的工作JSFiddle：

https://jsfiddle.net/psteele/p5Lpxj5a/

來源

2017-10-20 13:39:34 PatrickSteele

vueJS隱藏在動態錶行

回答

相關問題