Question

我有一个使用v-for循环以及下拉选择的俱乐部列表。除重复选择此select标记中的选项外，此方法效果很好。为了删除这些，我使用了计算属性。但是，当我将计算属性添加到我的过滤列表或js文件中时，内容不再呈现。这段代码最初来自于一个教程，但是当我实现计算属性时，某种程度上对我不起作用。欢迎任何帮助。

  const clubs = [
    {
   名称：“老虎”，
   地点：“曼彻斯特”，
   成员：“ 22”，
   注册：“否”，
   音调：“草”
    }，
    {
   名称：“海豚”，
   位置：“迈阿密”，
   成员：'19'，
   注册：“是”，
   音调：“草”
    }，
    {
   名称：“ Bleu Sox”，
   位置：“巴黎”，
   成员：“ 13”，
   注册：“是”，
   音调：“ Astroturf”
    }
];

const app = new Vue（{
  el：“＃app”，
  数据：{
    俱乐部：“俱乐部”，
    音调：”
  }，
  方法： {
    toggleDetails：function（club）{
      this。$ set（club，'showDetails'，！club.showDetails）
    }，
    filterList：function（event）{
      this.pitch = event.target.value;
    }，
    计算：{
      //删除重复项
      uniqueItemsList：function（）{
        const types = [];
        this.club.forEach（（club）=> {
          if（！types.includes（club.pitch））{
            types.push（club.pitch）;
          }
        }）;
        返回类型；
      }
    }
  }
}）;

我的HTML如下所示：

  



  
    
       {{club.name}} 
      
           {{club.location}} 
           {{club.members}}

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监视这些变量。因此，只需将球杆放在计算出的数据上，即可监视此数组中的变化。

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

{{club.name}}

2 个答案: