时间戳

首页 > 解决方案 > Vuex 向对象添加新的数组属性，并以反应方式将元素推送到突变内的该对象

vue.js - Vuex 向对象添加新的数组属性，并以反应方式将元素推送到突变内的该对象

问题描述

根据官方文档，vuex突变在反应性方面有一些限制。

当向一个对象添加一个新属性时，我们必须这样做，

Vue.set(obj, 'newProp', 123)

这可以。但是我们如何在不破坏反应性的情况下添加新的数组属性并将元素推送到该属性？

这是我到目前为止所做的。这工作正常，但问题是这不是反应性的。Getters无法识别状态发生的变化。

set_add_ons(state, payload) {
        try {

            if (!state.tour_plan[state.tour_plan.length - 1].add_ons) {
                state.tour_plan[state.tour_plan.length - 1].add_ons = [];
            }
            state.tour_plan[state.tour_plan.length - 1].add_ons.push(payload);


        } catch (error) {
            console.log("ERR", error)
        }
    },

如何将其转换为反应性代码？

标签： vue.jsvuejs2vuex

解决方案

您可以使用Vue.set创建add_ons属性以使其具有反应性；它也应该适用于数组：

Vue.set(state.tour_plan[state.tour_plan.length - 1], 'add_ons', []);

演示：

new Vue({
  el: '#app',
  data: {
    items: [{ id: 0 }]
  },
   methods: {
    addArray () {
      if (!this.items[this.items.length-1].add_on)
        this.$set(this.items[this.items.length - 1], 'add_on', [])
      this.items[this.items.length - 1].add_on.push(1)
    }
  }
})
<script src="https://unpkg.com/vue"></script>

<div id="app">
  <button v-on:click="addArray">
    Add 1 to add_on create if not exists
  </button>
  <div v-for="item in items">add_on content: {{ item.add_on }}</div>
</div>

推荐阅读