如何添加数组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?的主要内容,如果未能解决你的问题,请参考以下文章

如何在 VueJs 中将数组存储到 Vuex

如何将数组数据从 vuejs 传递到 laravel api 控制器

VueJs - 前置到数组

Vuejs如何给元素添加自定义属性

Vuejs2:数组更改时如何重新渲染数组计算属性

VueJS:如何返回 3 个新数组,每个数组中的项目数量相等,除了最后一个数组?