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

Question

我有一个使用v-for循环和dropdown select的俱乐部列表。除了这个select标记中的选项被重复之外，它工作得很好。为了删除这些属性，我使用了一个计算属性。但是，当我将计算属性添加到我的过滤列表或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-code问题，这是一个工作副本：

    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监视这些变量。因此，只需将clubs放在计算出的数据上，就可以观察该数组中的变化。