绑定存储上的动态属性

Question

通过阅读文档，我需要添加一个双向计算属性，以将数据从我的窗体绑定到存储。但是我需要绑定到对象上的一个项目：

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]"？

Answer 1

您可以为要动态的属性声明 getter 和 setter。计算属性将不起作用，因为无法将参数传递给它们。您可以在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 的变量。

这是对getter和setter的小提琴，但没有Vuex。