[英]How to add arrays VueJS?
I have an array desserts
that i am looping over to get the list of my desserts.我有一系列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.现在我有另一个数组moreDesserts
呈现一些带有值的复选框,当我 select 一个复选框时,它的值被添加到 vuex 中的selectedDessert
数组中。 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.我正在尝试创建一种方法,当用户选择一个复选框并单击按钮ADD ARRAYS
时, selected
数组应连接到desserts
数组。 I have created the mutation addArrays
but that doesn't seem to be adding the arrays.我已经创建了突变addArrays
但似乎没有添加 arrays。
Please check this working CodeSandbox .请检查此工作CodeSandbox 。
Here is my HelloWorld Component:这是我的 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>
This is my Vuex Store:-这是我的 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: {}
});
Any help will be appreciated.任何帮助将不胜感激。 Thank you.谢谢你。
You were almost there!你快到了! concat
method returns a new array and hence desserts
is unmodified. concat
方法返回一个新数组,因此未修改desserts
。 Please use this line state.desserts = state.desserts.concat(state.selectedDessert);
请使用此行state.desserts = state.desserts.concat(state.selectedDessert);
and your code should work!你的代码应该可以工作!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.