Привязка динамического свойства в магазине?

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

Что вы можете сделать, это объявить 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

Вот скрипка с геттерами и сеттерами, но без vuex.