Vue复选框过滤器组件不起作用 [英] Vue Checkbox filter component not working

问题描述

在单个文件组件中，我创建了一个复选框数组:

In a single file component I made a checkbox array:

    <label 
      v-for="(category, index) in categories" 
      :key="index"
     >
      <input type="checkbox" :value="category.value"
      @change="emitSearchValue">
      <span class="ml-2 text-gray-700 capitalize">{{ category.value }}</span>
    </label>

使用 EventBus 将数据传输到 List 组件:

With EventBus I transfer the data to the List component:

methods: {
    emitSearchValue() {
      EventBus.$emit('checked-value', 'this.checkedCategories')
    }
  }

在 List 组件中，我监听 EventBus:

In the List component I listen for the EventBus:

created() {
 EventBus.$on('checked-value', (checkedCategories) => {
  this.checkedvalue = checkedCategories;
 })
}

然后我的计算属性如下所示:

Then my computed property look like this:

computed: {
 filteredData() {

   return this.blogs.filter(blog =>
   // if there are no checkboxes checked. all values will pass otherwise the category must be included
    !this.checkedCategories.length || this.checkedCategories.includes(blog.category)
   )
  }
},

在控制台中我得到:

[Vue warn]: Error in render: "TypeError: Cannot read property 'length' of undefined"

这是沙盒的链接.

这里有什么问题?

推荐答案

将计算属性 filteredData 更改为:

Change the computed prop filteredData to:

computed: {
    filteredData() {
      if(!this.checkedvalue.length) return this.experiences

      return this.experiences.filter(experience =>
        this.checkedvalue.includes(experience.category)
      );
    }
}

这篇关于Vue复选框过滤器组件不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！