在商店上绑定动态属性？

【问题标题】：Binding a dynamic property on a store?在商店上绑定动态属性？
【发布时间】：2019-04-03 09:37:34
【问题描述】：

从阅读the docs 开始，我需要添加一个双向计算属性来将数据从我的表单绑定到存储。但我需要绑定到对象上的一个项目：

checked: {
    'football': [],
    'tennis': [],
    'rugby': [],          
},

计算不足：

testBinding: {
        get () {
            return this.$store.state.Sports.checked;
        },
        set (value) {
            this.$store.commit('Sports/checked', value);
        }
    },

在我的循环出复选框内：

<input type="checkbox" :value="option.id" v-model="testBinding">

当football 需要在绑定中动态设置时，我如何绑定到商店中的football 之类的东西，例如v-model="testBinding[key]" 之类的东西

【问题讨论】：

标签： vue.js vuejs2 vuex

【解决方案1】：

您可以做的是为您想要动态的属性声明getters 和setters。计算属性将不起作用，因为您无法将参数传递给它们。您可以像这样在 checked 数据对象上定义 football

checked: {
 get football () {
    return this.$store.state.Sports.checked;
 },
 set football (value) {
    this.$store.commit('Sports/checked', value);
 }
 'tennis': [],
 'rugby': [],          
},

并且应该可以绑定到它

<input type="checkbox" :value="option.id" v-model="checked['football']">

或

<input type="checkbox" :value="option.id" v-model="checked.football">

或

<input type="checkbox" :value="option.id" v-model="checked[var]">

其中var 是一个值为football 的变量

这是一个fiddle，带有 getter 和 setter，但没有 vuex。

【讨论】：