从 Vue 中的 v-for 列表中删除重复项

Question

我正在尝试按类别对我的笔记列表进行排序。我在一个类别中有多个笔记，所以v-for 在列表中多次返回分配的笔记类别。

我知道我应该使用计算属性来过滤列表，但我已经尝试过下面的sortedCategories，但似乎无法正常工作。

也许也相关，我目前正在使用 Vue2 过滤器按字母顺序对列表进行排序。在我得到没有重复的列表后，下一步是能够单击该类别并拉出该特定类别中的所有笔记。

我的代码是：

<template>
  <div class="notebook">
    <nav class="navbar" role="navigation" aria-label="main navigation">
      <div class="navbar-brand">
      </div>
    </nav>
    <ul>
      <!--
      <li v-for="(page, index) of pages" class="page" v-bind:class="{ 'active': index === activePage }"  @click="changePage(index)" v-bind:key="index">
        <div>{{page.category}}</div>
      </li>
      -->
      <li v-for="(page, index) of orderBy(pages, 'category')" class="page"
        v-bind:class="{ 'active': index === activePage }" v-bind:key="index">
        <div>{{ page.category }}</div>
      </li>
      <li class="new-page">Add Page +</li>

    </ul>
  </div>
</template>

<script>
  import Vue from 'vue'
  import Vue2Filters from 'vue2-filters'
  Vue.use(Vue2Filters)

  export default {
    name: 'Notebook',
    props: ['pages', 'activePage'],
    mixins: [Vue2Filters.mixin],
    computed: {
      sortedCategories() {
        return this.categories.filter(function (category, position) {
          return this.pages.indexOf(category) == position;
        });
      }
    },
    methods: {
      changePage(index) {
        this.$emit('change-page', index)
      },
      newPage() {
        this.$emit('new-page')
      },
    }
  }
</script>

<style scoped>
  .notebook {
    overflow-x: hidden;
    max-width: 20rem;
    width: 30rem;
    background: #d3d1d1;
  }

  .navbar {
    background-color: #000000;
    color: #dcdcdc;
    position: sticky;
    top: 0;
  }

  ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    height: 100%;
    position: relative;
  }

  li {
    padding: 1rem;
    font-size: 1.25rem;
    min-height: 1.5rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  li:hover {
    cursor: pointer;
    background-color: #a3a3a3;
  }

  .active {
    background-color: #0099ff;
  }

  .active:hover {
    background-color: #7cc1fa;
  }

  .new-page {
    background-color: #000000;
    color: white;
    bottom: 0;
    position: sticky;
    width: 100%;
    box-sizing: border-box;
  }

  .new-page:hover {
    background-color: #000000;
  }
</style>

Answer 1

如果您只想显示唯一的 category 字符串的排序列表，您可以使用 vanilla JavaScript 轻松做到这一点：

1. 在pages[] 上使用Array.reduce() 按category 对数组条目进行分组，其中重复的类别将覆盖以前的类别（从而删除重复项）。
2. 在结果 #1 上使用 Object.values() 来获取数组条目。
3. 在结果 #2 上使用 Array.sort() 以按 category 对数组进行排序。

new Vue({
  el: '#app',
  data: () => ({
    pages: [
      { id: 1, category: 'Technology' },
      { id: 2, category: 'Sports' },
      { id: 3, category: 'Business' },
      { id: 4, category: 'Health' },
      { id: 5, category: 'Technology' },
      { id: 6, category: 'Health' },
      { id: 7, category: 'Technology' },
    ]
  }),
  computed: {
    sortedCategories() {
      const cats = this.pages.reduce((p,c) => {
        p[c.category] = c
        return p
      }, {})
      return Object.values(cats).sort((a,b) => a.category.localeCompare(b.category))
    }
  }
})

<script src="https://unpkg.com/vue@2.6.12"></script>

<div id="app">
  <ul>
    <li v-for="cat of sortedCategories" :key="cat.id">
      <div>{{ cat.category }}</div>
    </li>
  </ul>
</div>

Answer 2

computed 应该是导出对象中的顶级键；现在它是methods 的孩子。尝试将其上移一级：

export default {
        name: 'Notebook',
        props: ['pages', 'activePage'],   
        mixins: [Vue2Filters.mixin],    

        computed: {
            sortedCategories() {
                return  this.pages.filter(function(page, position) {
                    return this.pages.indexOf(page.category)  == position; 
                });
            }
        }

        methods: {
          changePage (index) {
            this.$emit('change-page', index)
          },
        
          
          newPage () {
            this.$emit('new-page')
          },
         
        }
      }