Сортировать комментарии по типу в vue.js

Question

У меня есть форма компонента с фильтром выбора:

 <template>
     <div class="form-group">
                    <select name="" v-model="filterRev" @change="filterReviews(filterRev)" class="form-control" id="">
                      <option value="0">All comments</option>
                      <option value="1">Good Comments</option>
                      <option value="2">Standard Comments</option>
                      <option value="3">Badd comment</option>
                    </select>
     </div>
 </template>

 <script>
 export default {
     data() {
        filterRev: 0
     },
     methods: {
        filterReviews(type) {
            if(Number.isInteger(parseInt(type))) {
                 this.$emit('filter', type);
            }
        },
     }
 }
 </script>

В комментариях к компоненту у меня есть это:

        <div @filter="..." v-for="(comment, index) in items" :key="comment.id">
            <comment :data="comment"></comment>
        </div>

Как я могу проверить comment.type с помощью filter type?Мне нужно сортировать комментарии, когда пользователь выбирает определенный фильтр.В v-for у меня comment.type.

Answer 1

Одним из решений является использование переменной данных для выбора фильтра и вычисляемого свойства для возврата отфильтрованных комментариев:

1. Создание переменной данных в компоненте контейнера для хранения выбранного фильтратип (например, filterType).Так как событие filter из компонента выбора генерирует идентификатор фильтра в данных события (доступных в шаблоне через $event), мы можем использовать это для установки filterType в @filter -Обработчик события:

   // template
   <filter-select @filter="filterType = $event" />
   
   // script
   data() {
     return {
       filterType: 0
     }
   }
   

2. Создайте вычисляемое свойство в компоненте контейнера для возврата данных комментария, соответствующих выбору фильтра.Это использует Array.prototype.filter в массиве данных комментариев (т.е. items в данном случае).

   computed: {
     comments() {
       return Number(this.filterType) === 0
         ? this.items
         : this.items.filter(
             comment => Number(comment.type) === Number(this.filterType)
           );
     }
   }
   

3. Ссылка на это вычисленное свойство в вашем v-for loop:

   <comment v-for="comment in comments" :key="comment.id" :data="comment" />
   

демо

Answer 2

Отличный способ обработки таких фильтров - использование Vuex getter .Это заранее, но определенно поможет вам в более сложных сценариях.