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
}