Question

通过阅读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]"

Answer 1

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

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，其中包含吸气剂和塞脂剂，但没有vuex。

在商店上绑定动态属性？

1 个答案: