我有一个数组 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: {}
});
任何帮助将被感激。谢谢你的帮助。
你就快成功了 concat
方法返回一个新的数组,因此 desserts
是未经修改的。请使用这一行 state.desserts = state.desserts.concat(state.selectedDessert);
然后你的代码就可以工作了