使用复选框项更新状态对象 - Vue.js

Question

我正在尝试使用复选框来保持更新组件，因此如果选中该项目，则该值应添加到 VueX 商店中的状态项目。

在子组件中： childcomp.vue:

<q-item-section top>
  <q-checkbox v-model="chosen" :val="NameProp" color="teal" />
</q-item-section>

然后在父组件中我想显示哪个被选中

parent.vue:

<childcomp NameProp="Item1"></childcomp>
<childcomp NameProp="Item2"></childcomp>
<childcomp NameProp="Item3"></childcomp>

<p> {{chosen}} </p>

例如，如果我检查我应该看到的第一个和最后一个项目：

["Item1","Item3"] 如果我取消选中它们，则为空数组。

使用 VueX 商店保持此值更新的最简单方法是什么？

Answer 1

尝试使用 watcher 属性观察该数组并在处理程序内部调度操作：

watch:{
   chosen(newVal,oldVal){

    this.$store.dispatch('yourAction',newVal);

   }
}