我已经创建了一个 v-for 指令,现在我正在尝试添加一个下拉过滤器以过滤显示的结果。然而,它就是行不通。我仔细遵循了每一步,因为这是基于 Treehouse 教程,但由于某种原因,在更改下拉菜单时没有显示任何内容。似乎名称属性值没有设置为对象。每次选择一个新选项时,它都应该触发函数filterList。
const clubs = [
{
name: 'Tigers',
location: 'Manchester',
members: '22',
registered: 'No',
pitch: 'Grass'
},
{
name: 'Dolphins',
location: 'Miami',
members: '19',
registered: 'Yes',
pitch: 'Grass'
},
{
name: 'Bleu Sox',
location: 'Paris',
members: '13',
registered: 'Yes',
pitch: 'Astroturf'
}
];
const app = new Vue({
el: '#app',
data: {
clubs,
name: ''
},
methods: {
toggleDetails: function(club) {
this.$set(club, 'showDetails', !club.showDetails)
},
filterList: function() {
this.name = event.target.value;
console.log(this.name);
}
}
});
我的 HTML 如下;
<div id="app">
<select v-on:change="filterList">
<option v-for="club in clubs">{{club.name}}</option>
</select>
<ul>
<li v-show="name === club.name" v-for="club in clubs" v-on:click="toggleDetails(club)">
<h1>{{club.name}}</h1>
<div v-show="club.showDetails">
<p>{{club.location}}</p>
<p>{{club.members}}</p>
</div>
</li>
</ul>
</div>
最佳答案
您不需要为此访问 DOM 事件 - Vue 是响应式的,并且会在更改时更新 name
:
<select v-model="name">
<option v-for="club in clubs">{{club.name}}</option>
</select>
关于javascript - 为什么这个切换和过滤器在 Vue JS 中不起作用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54260989/