VueJS：从复选框中列出选定对象的状态中的项目是防止复选框被取消选中答案

【问题标题】：VueJS : Listing items from the state of selected object from checkboxes is preventing the checkbox to be uncheckedVueJS：从复选框中列出选定对象的状态中的项目是防止复选框被取消选中
【发布时间】：2021-01-08 22:00:39
【问题描述】：

我有一个搜索组件，其中列出了我的所有过滤器类别，这些类别在列出选中的项目时不会被取消选中。

我在组件中使用 vuex 存储来管理状态。我有这个突变可以处理类别的添加和删除，效果很好。

store.vue

updateSelectedCategories (state, data) {

      const value = data.checked;
      let childId = data.id;
       const parentId = data.parent;


      let count = 0;

      for(let prop in state.data.selectedCategories) {
        if(state.data.selectedCategories.hasOwnProperty(prop))
          ++count;
      }

      if (value) {
        // Check if SelectedCatIsEmpty
        if (count == 0) {
          state.data.selectedCategories[childId] = data;
        } else {
          if (state.data.selectedCategories[Object.keys(state.data.selectedCategories)[0]].parent !== parentId) {
            state.data.selectedCategories = {}


            state.data.selectedCategories[childId] = data;
          } else {
            state.data.selectedCategories[childId] = data;
          }
        }

      } else {
        delete state.data.selectedCategories[childId];
      }

    },

这是我的状态：

store.vue

  state: {
    loading : false,
    filter: {
      categories: [],
      color: [],
      material: [],
      price: [],
    },
    products: [],
    data : {
      mainCategory: '',
      selectedCategories: {},
      colors: [],
      material: [],
      price: [],
      action: 'categoryProductSearch',
      nonce: window.sage.nonce,
    },
    selectedCatSet: new Set(),
  },

我将所有选择的类别存储在。 state.data.selectedCategories

这个突变是由我的过滤器组件中的一个动作触发的

filter.vue

    handleCategoryChange (event, parent) {
      let data
      if(event.target.checked) {

        data = {'id': event.target.id, 'parent': parent,  'name': event.target.name, 'type': 'category', 'checked': true};
      } else {
        data = {'id': event.target.id,  'parent': parent, 'name': event.target.name, 'type': 'category', 'checked': false};
      }
      this.updateSelectedCategories(data);
      this.getProducts()
    },

这是我的复选框模板。 filter.vue

<div class="checkbox" v-for="(child, index) in category.children" :key="index">
   <input type="checkbox" class="input-filter" :parent="category.id" :id="child.id" :name="child.name" @change="handleCategoryChange($event, category.id)"
                        :checked="child.id in selectedCategories"/>
   <label :for="child.id"><p v-text="child.name"></p></label>
</div>

当我想在过滤器组件中添加所选类别的列表时出现问题 . filter.vue

  <button :id="category.id" class="selected-filters" v-for="category in selectedCategories" :key="category.id">
    {{ category.name }}
  </button>

这些项目被列出，但是当我取消选中我的复选框时，它并没有被取消选中，我的 console.log 中没有任何问题。

当我删除 selectedCategories 列表时，一切都开始正常工作了。

添加图片。

【问题讨论】：

标签： vue.js vuejs2 vuex

【解决方案1】：

在尝试了很多之后，我发现当我从过滤器标记代码中删除 id 时，取消选中再次开始发生。

所以改变的代码是：

  <button class="selected-filters" v-for="category in selectedCategories" :key="category.id">
    {{ category.name }}
  </button>

我不知道为什么这解决了这个问题，但这确实解决了它。

【讨论】：