Как удалить повторение из фильтра директивы v-for, используя вычисленные свойства в VueJS?

Question

У меня есть список клубов, использующих цикл v-for, а также выпадающий список. Это работает хорошо, за исключением того, что параметры в этом теге выбора повторяются. Чтобы удалить их, я использую вычисляемое свойство. Однако, когда я добавляю вычисляемое свойство в мой отфильтрованный список или в мой js-файл, содержимое больше не отображается. Этот код изначально взят из учебника, но почему-то у меня не работает, когда я реализую вычисляемое свойство. Любая помощь приветствуется.

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: {
    club: 'clubs',
    pitch: ''
  },
  methods: {
    toggleDetails: function(club) {
      this.$set(club, 'showDetails', !club.showDetails)
    },
    filterList: function(event) {
      this.pitch = event.target.value;
    }, 
    computed: {
      // REMOVES DUPLICATION
      uniqueItemsList: function() {
        const types = [];
        this.club.forEach((club)=> {
          if(!types.includes(club.pitch)){
            types.push(club.pitch);
          }
        });
        return types;
      }
    }
  }
});

Мой HTML выглядит следующим образом:

<div id="app">

<select v-on:change="filterList">
   <option>Select a surface</option>
   <option v-for="club in uniqueItemsList()">{{club.pitch}}</option>
</select>

  <ul>
    <li v-show="pitch === club.pitch" 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

Вы поместили computed в methods (computed должно быть за пределами methods). Кроме того, у вас есть ошибка в this.club.forEach, должна быть clubs (глобальная переменная).

Я исправил твои проблемы с Vue.js-кодом, и вот рабочая копия:

    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: {
    club: 'clubs',
    pitch: 'clubs'
  },
  methods: {
    uniqueItemsList: function() {
        const types = [];
        clubs.forEach((club)=> {
          if(!types.includes(club.pitch)){
            types.push(club.pitch);
          }
        });
        return types;
      },
    toggleDetails: function(club) {
      this.$set(club, 'showDetails', !club.showDetails)
    },
    filterList: function(event) {
      this.pitch = event.target.value;
    }, 
  },
});

И HTML часть:

<div id="app">

<select v-on:change="filterList">
   <option>Select a surface</option>
   <option v-for="club in uniqueItemsList()">{{club}}</option>
</select>

  <ul>
    <li v-show="pitch === club.pitch" 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 2

Чтобы вычисляемое свойство работало правильно, оно должно использовать data переменные (или другие computed переменные), потому что внутренне vuejs будет смотреть эти переменные с $watch fn.Поэтому просто поместите клубы в вычисленные данные, чтобы отслеживать изменения в этом массиве.