如何使用VueJS中的计算属性从v-for指令过滤器中删除重复项？

Question

I have a list of clubs using a v-for loop as well as a dropdown select. This works well except that the options in this select tag get repeated. To remove these I am using a computed property. However, when I add the computed property to my filtered list or my js file the content no longer renders. This code is originally from a tutorial, but somehow doesn't work for me when I implement the computed property. Any help welcome.

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;
      }
    }
  }
});

My HTML looks as follows:

<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

You have placed your computed in methods ( computed should be outside the methods ). Plus, you have an error in this.club.forEach , should be clubs (global variable).

I have fixed your Vue.js-code-issues and here is a working copy:

    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;
    }, 
  },
});

And HTML part:

<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>

Output result:

Answer 2

To computed property works correctly, it must use data variables (or other computed variables), because internally vuejs will watch these variables with $watch fn. So just put clubs on data that computed will watch for changes in this array.