Vue.js 2，观看 "Error in callback for watcher "yourAccountsState": "ReferenceError: value is not defined""

Question

我有以下 WATCH 属性来监视我的 v-model 数据(这是用于复选框，我正在使用 bootstrap-vue)。

我认为我的错误在于我如何在 WATCH 中设置值或如何在我的商店中调用它？ (这是一个问题，因为正在发送一个数组吗？)

我可以在 WATCH 内进行控制台，但是当我调度时，我得到了错误。

这是复选框标记:

<b-form-group label="Using sub-components:">
        <b-form-checkbox-group id="checkboxes1" name="flavour1" v-model="yourAccounts">
            <b-form-checkbox :value="test.value" class="card" v-for="test in filteredList" :key="bank.text">
                {{ test.text }}
            </b-form-checkbox>
        </b-form-checkbox-group>
</b-form-group>

电脑属性:

computed: {
    yourAccountsState: {
        get() {
            // console.log(this.yourAccounts);
            return this.yourAccounts
        },
    }
},
watch: {
    yourAccountsState(value) {
        this.$store.dispatch('setTestAccounts', value);

        console.log(value);
    }
}

在我的 store.js 中，我从模块中导入了以下内容

        const state = {
    TestAccounts: []
}

const mutations = {
    // from v-modal on selected accounts page
    SET_SELECTED_TESTS (state, testAccount) {
        state.TestAccounts = testAccount
    }
}

const actions = {
    setTestAccounts: ({commit}) => {
        commit('SET_SELECTED_TESTS', value);
    }
}

const getters = {
    yourAccounts: state => {
        return state.TestAccounts
    }
}

export default {
    state,
    mutations,
    actions,
    getters
}

Answer 1

如果您使用 v-model ，你需要给Vue一个setter，因为v-model是执行 v-bind 的速记方法和 v-on在幕后。

如果您不提供 setter，则不会以您想要的方式触发观察者。
您必须确保您分配给 v-model 的属性是一个数组，因此可以按照 bootstrap-vue 文档中的描述存储这些值。