Javascript 如何让Vuex更好地使用使用阵列的复选框？

我正在努力使复选框与Vuex一起工作。我在Codepen中设置了一个示例

我定义了如下复选框：

<v-checkbox
  v-for="(item, idx) in $store.state.checkboxes"
  :key="item.id"
  :label="`Checkbox ${idx + 1}: ${item.name} [${checkboxes[idx].selected}]`"
  :value="{ name: item.name, id: item.id, clicked: true }"
  v-model="checkboxes"
>
</v-checkbox>

调用

get

和

set

get，但是

set

在第一次单击时更改所有复选框，第二次单击时

val

为空

我希望有人有时间看一看，给我指出正确的方向

---

谢谢

好吧，对任何感兴趣的人来说，我都能让它发挥作用。我用包装器组件解决了这个问题。查看Codeopen以获取解决方案

这是进行重载提升的包装：

<template id="checkboxToggle">
  <div>
    <v-checkbox
      :label="`Checkbox ${item.id}: ${item.selected}`"
      v-model="value"
    >
    </v-checkbox>
  </div>
</template>

这是商店突变：

mutations: {
  updateFilter: (state, { filter, check }) => {
    console.log('mutations::filterCheck::item', filter, check)
    const match = state.checkboxes.filter(item => item.id === filter.id)[0]
    console.log('mutations::filterCheck::match', match)
    match.selected = check
  }
}

---

灵感来自于这本书。它是以一种周而复始的方式进行的。

好吧，对于任何感兴趣的人，我都让它工作起来了。我用包装器组件解决了这个问题。查看Codeopen以获取解决方案

这是进行重载提升的包装：

<template id="checkboxToggle">
  <div>
    <v-checkbox
      :label="`Checkbox ${item.id}: ${item.selected}`"
      v-model="value"
    >
    </v-checkbox>
  </div>
</template>

这是商店突变：

mutations: {
  updateFilter: (state, { filter, check }) => {
    console.log('mutations::filterCheck::item', filter, check)
    const match = state.checkboxes.filter(item => item.id === filter.id)[0]
    console.log('mutations::filterCheck::match', match)
    match.selected = check
  }
}

灵感来自于这本书。它是以一种迂回的方式进行的