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

我已经创建了一个v-for指令，现在我正在尝试添加一个下拉过滤器，以便过滤显示的结果。然而，它只是不起作用。我仔细地遵循了每一步，因为这是基于树屋教程的，但由于某些原因，在更改下拉列表时，什么也不显示。似乎未将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>

{{俱乐部名称}


{{俱乐部名称}
{{club.location}

{{俱乐部.会员}

您不需要为此访问DOM事件-Vue是反应式的，当更改时将更新

名称

：

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

{{俱乐部名称}

您不需要为此访问DOM事件-Vue是反应式的，当更改时将更新

名称

：

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

{{俱乐部名称}

很有趣。因此，它看起来更健壮，因为它在函数（event）中不包含“event”。如果你使用我正在学习的教程中的内容，而忘记了“事件”，那么它就会崩溃。很有趣。因此，它看起来更健壮，因为它在函数（event）中不包含“event”。如果你使用了我正在学习的教程中的内容，而忘记了“事件”，它就会崩溃。