Vue.js -仅显示假数组元素
Vue.js -仅显示假数组元素
提问于 2018-05-31 07:20:17
如果我的vue.js中有像下面这样的代码，那么在单击一个按钮时，我如何才能只显示我单击的数组项(例如，Donnie)，而隐藏其余的数组项呢？(Joanne，Peter e.t.c)，那么当您再次单击唯一显示的元素时，是否会使所有其他数组元素再次显示？
const app = new Vue({
el: '#app',
data: {
keyword: '',
friends: [
{
name: "Donnie",
age: "20"
},
{
name: "Joanne",
age:"19",
},
{
name: "David",
age: "26"
},
{
name: "Peter",
age: "23"
},
{
name: "John",
age: "29"
},
{
name: "Jason",
age: "19"
},
],
},
computed: {
filteredList() {
return this.friends.filter((friend) => {
return friend.name.toLowerCase().includes(this.keyword) + friend.age.includes(this.keyword) + friend.name.includes(this.keyword);
});
}
},
methods:{
exclude(friend) {
console.log(!friend.name);
},
}
})HTML
<div v-for="friend in filteredList" class="card" @click="exclude(friend)">
{{friend.name}} - {{friend.age}}
</div>回答 1
Stack Overflow用户
发布于 2018-05-31 07:53:44
我想这就是你要找的：
const app = new Vue({
el: '#app',
data: {
keyword: '',
friends: [
{
name: "Donnie",
age: "20"
},
{
name: "Joanne",
age:"19",
},
{
name: "David",
age: "26"
},
{
name: "Peter",
age: "23"
},
{
name: "John",
age: "29"
},
{
name: "Jason",
age: "19"
},
],
selected: null
},
computed: {
filteredList() {
if (!this.selected) {
return this.friends.filter((friend) => {
return friend.name.toLowerCase().includes(this.keyword) + friend.age.includes(this.keyword) + friend.name.includes(this.keyword);
});
} else {
return [this.selected];
}
},
},
methods:{
exclude(friend) {
if(!this.selected) {
this.selected = friend;
} else {
this.selected = null;
}
},
}
});<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
<div v-for="friend in filteredList" class="card" @click="exclude(friend)">
{{friend.name}} - {{friend.age}}
</div>
</div>
这里的诀窍是，selected数据属性存储朋友，如果有朋友，还兼任检查器，因此如果没有，则显示全部，如果是，则只显示那个朋友。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50614568
复制相关文章
相似问题