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

Question

我已经创建了一个v-for指令，现在我正在尝试添加一个下拉过滤器，以便过滤显示的结果。然而，它就是不起作用。我已经仔细地遵循了每一步，因为这是基于Treehouse教程，但由于某些原因，当改变下拉菜单时什么也没有显示。似乎没有将name属性值设置为该对象。每次选择一个新选项时，它都应该触发函数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>