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

一种解决方案是将数据变量用于过滤器选择，并使用计算属性返回过滤后的注释：

在容器组件中创建一个数据变量以保存所选的过滤器类型（例如filterType）。由于来自选择组件的filter事件在事件数据中发出过滤器ID（可通过$event在模板中使用），因此我们可以使用它在{{1}中设置filterType }事件处理程序：
```
@filter
```
在容器组件中创建computed property，以返回与过滤器选择匹配的注释数据。这会在评论数据数组上使用Array.prototype.filter（在本例中为// template <filter-select @filter="filterType = $event" /> // script data() { return { filterType: 0 } }）。
```
items
```
在您的computed: { comments() { return Number(this.filterType) === 0 ? this.items : this.items.filter( comment => Number(comment.type) === Number(this.filterType) ); } }循环中引用该计算属性：
```
v-for
```

demo

Answer 2

处理此类过滤器的一种好方法是使用Vuex getters。它是先进的，但肯定会在更复杂的情况下为您提供很多帮助。

在vue.js中按类型对评论进行排序

2 个答案: