Как добавить массивы VueJS? - PullRequest
Новая
       20

Как добавить массивы VueJS?

0 голосов
/ 03 мая 2020

У меня есть массив desserts, который я зацикливаю, чтобы получить список моих десертов. Теперь у меня есть другой массив moreDesserts, который отображает некоторые флажки со значением, и когда я выбираю флажок, его значение добавляется в массив selectedDessert в vuex. Я пытаюсь создать метод так, чтобы, когда пользователь выбирает флажок и нажимает кнопку ADD ARRAYS, массив selected должен быть объединен с массивом desserts. Я создал мутацию addArrays, но, похоже, это не добавляет массивы.

Пожалуйста, проверьте эту работающую CodeSandbox .

Вот мой HelloWorld Компонент: 

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

Это мой магазин Vuex: - 

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

Любая помощь будет оценена. Спасибо.

1 Ответ

2 голосов
/ 03 мая 2020

Вы были почти там! concat метод возвращает новый массив и, следовательно, desserts не изменяется. Пожалуйста, используйте эту строку state.desserts = state.desserts.concat(state.selectedDessert); и ваш код должен работать!

...