VueJS中使用计算属性去除v-for重复项后页面不渲染的求助

我帮你梳理了代码里的几个关键问题，正是这些问题导致页面无法正常渲染，咱们一步步来修复：

核心错误点 #

• 语法结构错误：你的methods块没有正确闭合（缺少}），导致computed被错误嵌套在methods内部，Vue无法识别这个计算属性，直接引发渲染失败。
• 响应式数据源问题：原始的clubs数组定义在Vue实例外部，没有纳入Vue的响应式系统；同时计算属性里错误地引用了this.club（这是你data里的字符串'clubs'），而非实际的俱乐部数组。
• 计算属性使用错误：计算属性是属性而非方法，不需要加()调用；而且你的uniqueItemsList返回的是去重后的场地值数组，下拉选项里应该直接渲染数组元素，而不是club.pitch。
• 指令顺序问题：Vue官方推荐将v-for放在v-show前面（v-for优先级更高），否则可能导致列表渲染逻辑异常。
• 冗余数据：data里的club: 'clubs'没有实际作用，可以移除。

修正后的完整代码 #

JavaScript代码 #

const app = new Vue({
  el: '#app',
  data: {
    pitch: '',
    // 将俱乐部数组纳入响应式系统
    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' } 
    ]
  },
  methods: {
    toggleDetails: function(club) {
      this.$set(club, 'showDetails', !club.showDetails)
    },
    filterList: function(event) {
      this.pitch = event.target.value;
    }
  }, // 修复methods的闭合问题
  computed: {
    uniqueItemsList: function() {
      const types = [];
      this.clubs.forEach((club)=> { // 修正为遍历this.clubs
        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="pitch in uniqueItemsList" :value="pitch">{{pitch}}</option>
  </select>
  <ul>
    <!-- 调整v-for和v-show的顺序，v-for在前 -->
    <li v-for="club in clubs" v-show="!pitch || pitch === club.pitch" 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>

额外优化说明 #

我还在列表的v-show里加了!pitch的判断，这样当用户还没选择任何场地时，所有俱乐部都会显示，提升了初始体验。

内容的提问来源于stack exchange，提问作者Al-76