Question

我有以下WATCH属性监视我的v模型数据（这是针对复选框的，我正在使用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的速记方法。

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

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

1 个答案: