javascript - 为什么这个切换和过滤器在 Vue JS 中不起作用？

Question

我已经创建了一个 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>

Answer 1

您不需要为此访问 DOM 事件 - Vue 是响应式的，并且会在更改时更新 name:

<select v-model="name">
   <option v-for="club in clubs">{{club.name}}</option>
</select>