Vue.js 2, WATCH "Error in callback for watcher "yourAccountsState": "ReferenceError: value is not defined""

Viewed 15161

I have the following WATCH property watching my v-model data (this is for checkboxes and I'm using bootstrap-vue).

I think my mistake is in how I'm setting the value in either the WATCH or how it is being called in my store? (is it an issue because an array is being sent over?)

I can console inside the WATCH, but when I dispatch, then I get the error.

Here is the checkbox markup:

<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>

the computer property:

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

        console.log(value);
    }
}

In my store.js I have the following imported from a modules

        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
}
1 Answers

If you use v-model, you need to give Vue a setter, because v-model is a shorthand method which executes v-bind and v-on behind the scenes.

If you don't provide a setter, the watcher won't be triggered the way you want. And you have to make sure, that the property you assign to v-model is an array, so that the values can be stored as described in the bootstrap-vue docs.

Related