Удаление дубликатов из списка v-for в Vue

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. Используйте Array.map() для сопоставьте объекты с строковым массивом category
2. Используйте new Set() в результате # 1 для удаления дубликатов
3. Используйте Array.from() в результате № 2 для преобразования набора в массив
4. Используйте Array.sort() в результате № 3 для сортировки массива

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.map(x => x.category)
      const uniqCats = Array.from(new Set(cats))
      return uniqCats.sort()
    }
  }
})

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

<div id="app">
  <ul>
    <li v-for="(category, index) of sortedCategories" :key="index">
      <div>{{ 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')
          },
         
        }
      }