0

I have an array desserts that i am looping over to get the list of my desserts. Now i have another array moreDesserts that renders some checkboxes with value and i when i select a checkbox, it's value gets added to the selectedDessert array in the vuex. I am trying to create a method such that when a user selects a checkbox and clicks on the button ADD ARRAYS the selected array should be concatenated to the desserts array. I have created the mutation addArrays but that doesn't seem to be adding the arrays.

Please check this working CodeSandbox.

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

This is my Vuex Store:-

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: {}
});

Any help will be appreciated. Thank you.

3
  • I can also use concat but how do i set it in a different mutation/action? Commented May 3, 2020 at 0:38
  • yes that there about sums it up. lol. Commented May 3, 2020 at 0:46
  • No, i want to add selectedDessert in desserts array, not push the payload. That part is already being handled. Commented May 3, 2020 at 0:48

1 Answer 1

2

You were almost there! concat method returns a new array and hence desserts is unmodified. Please use this line state.desserts = state.desserts.concat(state.selectedDessert); and your code should work!

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.