Почему этот переключатель не работает в 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>