如何添加数组VueJS?
Posted
技术标签:
【中文标题】如何添加数组VueJS?【英文标题】:How to add arrays VueJS? 【发布时间】:2020-08-17 10:55:18 【问题描述】:我有一个数组desserts
,我正在循环获取我的甜点列表。现在我有另一个数组moreDesserts
,它呈现一些带有值的复选框,当我选择一个复选框时,它的值被添加到 vuex 中的selectedDessert
数组中。我正在尝试创建一种方法,以便当用户选择复选框并单击按钮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
数组中添加selectedDessert
,而不是推送有效负载。那部分已经在处理中了。
【参考方案1】:
你快到了! concat
方法返回一个新数组,因此 desserts
未修改。请使用此行state.desserts = state.desserts.concat(state.selectedDessert);
,您的代码应该可以工作!
【讨论】:
以上是关于如何添加数组VueJS?的主要内容,如果未能解决你的问题,请参考以下文章