如何使用带有复选框的 Vue 计算设置器？答案

【问题标题】：How to use Vue computed setters with checkbox?如何使用带有复选框的 Vue 计算设置器？
【发布时间】：2019-07-22 18:52:45
【问题描述】：

我有一个复选框列表：

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

问题是在 setter 中我只得到 true/false 而不是对象或对象数组。

【问题讨论】：

v-model="checked_payment_systems" 这看起来不对。还有，你为什么用v-model和:value="system"？
在默认 vue 模板中的 jsfiddle.net 中，您拥有带有复选框的 Todos 应用程序 :-)

标签： vue.js vuejs2 vuex

【解决方案1】：

您使用输入值定义v-models 的计算属性。 set 属性将使用输入值调用。在您的示例中，您将相同的 get-set 绑定到 all 您的复选框。它应该以不同的方式完成。

如果我在你那里，我会删除 v-model 并手动声明要发生的函数 onchange 和 value，并将 a 键传递给它们，你会在我的对象中获取特定值。

我为你做了一个例子：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>

【讨论】：