lundi 4 février 2019

How to get Vuex to play nice with checkboxes that use an array?

I'm struggling to get checkboxes to work with Vuex. I have setup an example in this Codepen.

I have defined my checkboxes like this:

<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>

And these are the accompanying computed get and set:

computed: {
  checkboxes: {
    set(val){
      console.log('checkboxes::set::val', val)
      console.log('checkboxes::set::state', this.$store.state)
      const triggeredBy = val.pop()
      console.log('checkboxes::set::triggeredBy', triggeredBy)
      this.$store.commit('updateCheckbox', triggeredBy)
    },
    get() {
      console.log('checkboxes::set::get')
      return this.$store.state.checkboxes
    }
  }
}

The get and set get called, but the set changes all checkboxes on the first click and on the second click the val is null.

I hope someone has time to have a look at it and point me in the right direction.

Thx!




Aucun commentaire:

Enregistrer un commentaire