I am working on updating my contact list whenever a different brand is selected. The goal is to clear the array of contacts associated with the current brand and then refill it with the new brand's contacts.
However, I'm facing an issue in my Vuex setup where the clearing of the array doesn't seem to work as expected. Is there anyone who can help me figure out why?
Below is my Store file:
export default {
state: {
brands: Array(), //Could potentially be used later, if not, remove.
brandsForDropdown: Array(),
brandContactsForDropdown: Array(),
},
getters: {
brands: state => {
return state.brands;
},
brandsForDropdown: state => {
return state.brandsForDropdown
},
brandContactsForDropdown: state => {
return state.brandContactsForDropdown
}
},
actions: {
getBrands({state, commit}) {
Vue.http.get(process.env.VUE_APP_API_SERVER + '/brands').then(response => {
if(response.body.length > 0) {
for (var i = 0; i < response.body.length; i++) {
commit('pushBrands', {"name" : response.body[i].name, "value" : response.body[i].id})
}
}
}, response => {
// error callback
});
},
getBrandContacts({state, commit}, payload) {
//commit('resetBrandContacts')
Vue.http.get(process.env.VUE_APP_API_SERVER + '/brands/contacts/' + payload.value).then(response => {
if(response.body.length > 0) {
let newArray = [];
for (var i = 0; i < response.body.length; i++) {
newArray.push({"name" : response.body[i].firstname + " " + response.body[i].surname, "value" : response.body[i].id})
}
commit('pushBrandContact', newArray)
}
}, response => {
// error callback
});
}
},
mutations: {
pushBrands(state, payload) {
state.brandsForDropdown.push(payload)
},
resetBrands(state) {
state.brandsForDropdown = []
},
resetBrandContacts(state) {
state.brandContactsForDropdown = []
},
pushBrandContact(state, payload) {
console.log(payload)
state.brandContactsForDropdown = payload
console.log(state.brandContactsForDropdown)
}
}
}
Here is the complete component code:
<script>
export default {
data () {
return {
productName: null,
productBrand: null,
brands: this.$store.getters.brandsForDropdown,
selectedBrand: null,
brandContacts: this.$store.getters.brandContactsForDropdown,
selectedContacts: null,
}
},
computed: {
},
watch: {
selectedBrand: function() {
if(this.selectedBrand != null) {
this.$store.dispatch('getBrandContacts', this.selectedBrand)
//this.brandContacts = this.$store.getters.brandContactsForDropdown
}
console.log(this.brandContacts);
}
},
methods: {
},
mounted: function() {
this.$store.dispatch('getBrands')
}
}
</script>
This wraps up my entire Vuex module.