Как заставить Vuex хорошо играть с флажками, которые используют массив? - PullRequest
Новая
       16

Как заставить Vuex хорошо играть с флажками, которые используют массив?

0 голосов
/ 04 февраля 2019

Я изо всех сил пытаюсь заставить флажки работать с Vuex.Я настроил пример в this 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: 

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

Вызываются get и set, но set меняет все флажки при первом щелчке, а при втором щелчке val - ноль.

Я надеюсь, что у кого-то есть время взглянуть на это и указать мне правильное направление.

Спасибо!

1 Ответ

0 голосов
/ 04 февраля 2019

Хорошо, для всех, кто заинтересован, я получил его на работу.Я решил это с компонентом обертки.Проверьте this Codeopen для решения.

Это обертка, которая выполняет тяжелую работу: 

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

И это вычисляемое свойство с getи set: 

const CheckboxToggle = Vue.component('checkboxToggle', {
  template: "#checkboxToggle",
  props: ['item'],
    computed: {
    value: {
      get() {
        console.log('checkboxToggle::value::get', this.item.selected)
        return this.item.selected;
      },
      set(val) {
        const check = val ? true : false
        console.log('checkboxToggle::value::set::mutation', check, this.item.id)
        this.$store.commit('updateFilter', { filter: this.item, check })
      },
    },
  }
})

И это мутация магазина: 

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

Вдохновение пришло из этого Stackoverflow вопрос .Он делает это окольным путем.

...