Как использовать вычислители Vue с флажком?

Question

У меня есть список флажков:

<ul>
    <li v-for="system in payment_systems">
        <input type="checkbox" :id="'ps-' + system.id" v-bind:value="system" v-model="checked_payment_systems">
        <label :for="'ps-' + system.id">{{ system.translated.name }}</label>
    </li>
</ul>

И мне нужно сохранить отмеченные элементы в Vuex, поэтому я использую вычисленные свойства, например:

computed: {
    checked_payment_systems: {
        get() {
            return this.$store.state.program.payment_systems;
        },
        set(payment_systems) {
            console.log(payment_systems)
        }
    }
},

Проблема в том,что в сеттере я получаю только true/false вместо объекта или массива объектов.

Answer 1

вычисленное свойство, которое вы определили v-model s с входным значением.свойство set будет вызвано с входным значением.в вашем примере вы привязываете один и тот же get-set к all ваших флажков.это должно быть сделано по-другому.

если бы я там, где вы, я бы удалил v-model и вручную объявил бы функцию, которая произойдет onchange и value, и передал бы им ключ, вы получитеконкретное значение в моем объекте.

я сделал для вас пример: https://jsfiddle.net/efrat19/p87ag0w3/1/

const store = new Vuex.Store({
  state: {
    program:{
        payment_systems:{'paypal':false,'tranzila':false},
    }
  },
  mutations:{
    setPayment(state,{system,value}){
    	state.program.payment_systems[system]=value;
    }
  },
  actions:{
    setPayment({commit},{system,value}){
 
    	commit('setPayment',{system,value})
    }
  }
})

const app = new Vue({
	store,
  el: '#app',
  data() {
  },
  computed: {
  	 checked_payment_systems(){
     return system=>
            this.$store.state.program.payment_systems[system]
     }
  },
  methods:{
  	setValue(system,value){
    	this.$store.dispatch('setPayment',{system,value})
    }
}});

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="
https://cdnjs.cloudflare.com/ajax/libs/vuex/3.1.0/vuex.js"></script> 
<div id="app">
   <li v-for="(value,system) in $store.state.program.payment_systems">
        <input type="checkbox" :id="'ps-' + system.id" :checked="checked_payment_systems(system)" @change="setValue(system,$event.target.checked)">
        <label :for="'ps-' + system.id" >{{system}}</label>
    </li>
    <br>
    values in the store:
    <br>
    <br>
{{$store.state.program.payment_systems}}
</div>