Warning: file_get_contents(/data/phpspider/zhask/data//catemap/7/jsf/5.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 如何添加阵列VueJS?_Javascript_Arrays_Vue.js_Vuex_Vuetify.js - Fatal编程技术网

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: {}
});