使用vuejs选中/取消选中子组件中的复选框

Question

背景：

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

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

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

子项 ： CategoryDisplay.vue ：这是处理类别行的视图和方法的组件。

我的问题：

当我单击子组件中的类别复选框时，如果该复选框被选中，该类别将被添加到父组件的过滤器列表中。这个管用。

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

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

这是我的实际代码：

研究产品.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) {

      var newCategory = {

        type: "category",

        slug: category.slug,

        name: category.name

      };

      if (category.checked) {

        if (!this.selectedCategories.includes(category.slug)) {

          this.selectedCategories.push(category.slug);

          this.listFilters.push(newCategory);

        }

      } else {

        if (this.selectedCategories.includes(category.slug)) {

          const index = this.selectedCategories.indexOf(category.slug);

          if (index > -1) {

            this.selectedCategories.splice(index, 1);

          }

        }

        this.listFilters = this.listFilters.filter(function(item) {

          for (var key in newCategory) {

            if (item[key] === undefined || item[key] == newCategory[key])

              return false;

          }

          return true;

        });

      }

    },

    removeFilter(filter) {
     // THERE, I NEED TO UNCHECK THE RELATED CHECKBOX IN CHILD COMPONENT
     this.listFilters = this.listFilters.filter(function(item) {
        for (var key in filter) {
          if (item[key] === undefined || item[key] == filter[key]) return false;
        }
        return true;
      });

    }

  }

};
</script>

类别显示。视频：

<template>
  <b-form-checkbox-group class="w-100">
    <b-form-checkbox :value="category.slug" class="w-100" @input="selection" v-model="selected" ref="checked">
      {{ category.name }}
      <span class="badge badge-secondary float-right">{{ category.products_count }}</span>
    </b-form-checkbox>
  </b-form-checkbox-group>
</template>

<script>
export default {
  props: {
    category: {
      type: Object,
      required: true
    }
  },

  data() {
    return {
      selected: false
    }
  },

  methods: {
    selection() {
      var response = false;
      if(this.selected.length !== 0){
        response = true;
      }
      this.$emit('categorySelected', {slug: this.category.slug, name: this.category.name, checked: response});
    }
  }
};
</script>

Answer 1

这里有一个简化的样本供你参考。您可以使用< code>sync修饰符来实现父级和子级之间的双向绑定。以及带有< code>setter和< code>getter的子元素中的计算属性

因此，将所有类别传递给子类别，并同步所选类别：

<HelloWorld :cats.sync="selectedCategories" :categories="categories"/>

子组件采用类别、迭代并显示复选框。这里我们使用 computed 属性，当单击复选框时，setter 会向父级发出更改：

<label v-for="c in categories" :key="c.id">
  <input v-model="temp" type="checkbox" :value="c">
  {{ c.name }}
</label>

脚本：

computed: {
  temp: {
    get: function() {
      return this.cats;
    },
    set: function(newValue) {
      this.$emit("update:cats", newValue);
    }
  }
}

父级只需迭代selectedCategories即可，如您所愿，当selectedCategories的父级发生更改时，子级将自动知道项目何时被删除。

以下是供您参考的完整示例：沙盒