Vue.js 2，观看“观察者“yourAccountsState”的回调错误：“ReferenceError：未定义值””

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的二传手，因为v-model是执行的速记方法v-bind，并v-on在幕后。

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