Currently, I am working with two arrays in my Vue application. The first array called desserts lists all the desserts that I have. The second array, moreDesserts, displays checkboxes with values. When a user selects a checkbox, the value is added to the selectedDessert array in Vuex state. My goal is to create a method where upon selecting a checkbox and clicking the button ADD ARRAYS, the selected array should be concatenated with the desserts array. I have set up a mutation called addArrays for this purpose, but it doesn't seem to be functioning as expected.
If you want to see the code in action, please visit this CodeSandbox.
This code snippet shows my HelloWorld Component:
<template>
<div class="ml-3">
<v-flex v-for="el in getDesserts" :key="el.name">
<div class="title mt-2">{{el.name}}</div>
</v-flex>
<v-flex v-for="dessert in getMoreDesserts" :key="dessert.fat">
<v-checkbox v-model="selectedDessert" :label="dessert.name" :value="dessert"></v-checkbox>
</v-flex>
<v-btn @click="addArrays">Add Arrays</v-btn>
</div>
</template>
<script>
import { mapGetters } from "vuex";
export default {
name: "HelloWorld",
data() {
return {};
},
computed: {
...mapGetters({
getDesserts: "getDesserts",
getMoreDesserts: "getMoreDesserts",
getSelectedDessert: "getSelectedDessert"
}),
selectedDessert: {
get() {
return this.getSelectedDessert;
},
set(val) {
return this.$store.commit("setSelectedDessert", val);
}
}
},
methods: {
addArrays() {
this.$store.commit("addArrays");
console.log(this.selectedDessert);
}
}
};
</script>
Here is my Vuex Store setup:
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
export default new Vuex.Store({
state: {
desserts: [
{ name: "Yogurt", calories: 169, fat: 22.0 },
{ name: "Chocolate", calories: 270, fat: 19.2 }
],
moreDesserts: [
{ name: "Ice Cream", calories: 280, fat: 14.0 },
{ name: "Cake", calories: 400, fat: 35.0 }
],
selectedDessert: []
},
getters: {
getMoreDesserts: state => state.moreDesserts,
getSelectedDessert: state => state.selectedDessert
},
mutations: {
setSelectedDessert(state, payload) {
state.selectedDessert = payload;
},
addArrays(state) {
state.desserts.concat(state.selectedDessert);
state.selectedDessert = [];
},
},
actions: {}
});
Your assistance on resolving this issue would be greatly appreciated. Thank you.