小编mic*_*ael的帖子

语境 ：

我是第一次在项目中使用 VueJS，所以我可能没有以正确的方式使用它。

我有一个父组件和一个子组件：

父级： ResearchProducts.vue：显示可以按类别过滤的产品列表。过滤器是与产品类别相关的复选框。

Child : CategoryDisplay.vue : 这是处理视图和类别行方法的组件。

我的问题 ：

当我单击子组件内的类别复选框并选中该复选框时，该类别将添加到父组件中的过滤器列表中。这有效。

当我取消选中该复选框时，该类别将从该列表中删除。这也有效。

现在，我已将所有类别显示为父组件中的按钮，以使用户更容易看到过滤器。我的问题是我希望这个按钮在我点击它时取消选中子组件内的相关复选框。

这是我的实际代码：

ResearchProducts.vue :

<template>
 <div>
     <template v-for="category in categories">
          <category-display
                 :category="category"
                 :key="'category_'+category.id"
                 :checked="checked"
                 @categorySelected="categorySelected"
               ></category-display>
     </template>
     <button
               v-for="filter in listFilters"
               :key="'filter_'+filter.slug"
               class="btn btn-light btn-sm mr-2 mb-2"
               @click="removeFilter(filter)"
             >
               {{ filter.name }}
      </button>
 </div>
</template>
<script>
export default {

  data() {

    return {

      categories: { // HERE A COLLECTION CONTAINING ALL MY CATEGORIES },

      selectedCategories: [],

      listFilters: []

    };

  },

  methods: {

    categorySelected(category) …