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

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

Answer 1

您使用输入值定义v-model的计算属性。 set属性将使用输入值来调用。在您的示例中，您要将相同的获取集绑定到复选框的全部。应该做的不同。

如果我在您的位置，我将删除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>

如何通过复选框使用Vue计算的二传手？

1 个答案: