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隐藏在动态表行

回答

相关问题