Javascript 如何添加阵列VueJS?
我有一个数组Javascript 如何添加阵列VueJS?,javascript,arrays,vue.js,vuex,vuetify.js,Javascript,Arrays,Vue.js,Vuex,Vuetify.js,我有一个数组甜点,我正在循环它来获取我的甜点列表。现在我有了另一个数组moreDesserts,该数组呈现一些带有值的复选框,当我选中一个复选框时,它的值将添加到vuex中的selecteddesert数组中。我试图创建一种方法,当用户选中一个复选框并单击按钮addarrays时,选中的数组应连接到甜点数组。我已经创建了变异addArrays,但似乎没有添加数组 请检查这个工作状态 这是我的HelloWorld组件: <template> <div class="m
甜点
,我正在循环它来获取我的甜点列表。现在我有了另一个数组moreDesserts
,该数组呈现一些带有值的复选框,当我选中一个复选框时,它的值将添加到vuex中的selecteddesert
数组中。我试图创建一种方法,当用户选中一个复选框并单击按钮addarrays
时,选中的数组应连接到甜点
数组。我已经创建了变异addArrays
,但似乎没有添加数组
请检查这个工作状态
这是我的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>
任何帮助都将不胜感激。多谢各位 你就快到了concat
方法返回一个新数组,因此desserts
未被修改。请使用此行state.desserts=state.desserts.concat(state.selecteddesert)代码>并且您的代码应该可以工作 你就快到了concat
方法返回一个新数组,因此desserts
未被修改。请使用此行state.desserts=state.desserts.concat(state.selecteddesert)代码>并且您的代码应该可以工作 我也可以使用concat
,但是我如何在不同的突变/动作中设置它呢?是的,这是对它的总结。lol.不,我想在deserts
数组中添加selecteddesert
,而不是推送有效负载。这一部分已经在处理中。我也可以使用concat
,但是我如何在不同的突变/动作中设置它呢?是的,这是一个总结。lol.不,我想在deserts
数组中添加selecteddesert
,而不是推送有效负载。这一部分已经在处理中。
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: {}
});