子组件中的 Vue 数组道具未更新

Question

我有一个来自后端的模型，其中通常包含元素数组的属性可以为空。发生这种情况时，我会将其初始化为一个空数组。但是，这样做似乎破坏了我更新子组件中数组的能力。示例代码可以在下面找到。

Vue.component('Notes', {
 template: '<div>{{items}}<ul><li v-for="item in items">{{ item.text }}</li></ul><button @click="add">Add</button></div>',
 props: {
  items: Array,
 },
 methods: {
   add() {
    console.log('added');
    this.items.push({ text: "new item" });
   }
 }
});

new Vue({
 el: "#demo",
 data() { return { model: { }  }},
 created() { if(!this.model.items) this.model.items = []; }
});

<script src="https://unpkg.com/vue"></script>

<div id="demo">
  <Notes :items="model.items" />
</div>

如果主要组件中的数据是model: { items : [] }，一切正常。但我无法控制后端数据来保证这一点。

Answer 1

您应该发出一个事件来更新父组件中的 prop

在子组件中：

 this.$emit('add-item',{
        text: "new item"
      });

在父模板中为发出的事件添加处理程序：

  <Notes :items="model.items" @add-item="AddItem" />

Vue.component('Notes', {
  template: '<div>{{items}}<ul><li v-for="item in items">{{ item.text }}</li></ul><button @click="add">Add</button></div>',
  props: {
    items: Array,
  },
  methods: {
    add() {
      console.log('added');
      this.$emit('add-item', {
        text: "new item"
      });
    }
  }
});

new Vue({
  el: "#demo",
  data() {
    return {
      model: {
        items: [] //init it here in order to avoid reactivity issues
      }
    }
  },
  methods: {
    AddItem(item) {
      this.model.items.push(item)
    }
  },

});

<script src="https://unpkg.com/vue"></script>

<div id="demo">
  <Notes :items="model.items" @add-item="AddItem" />
</div>

Answer 2

在您的 Notes 组件中，您在数据中声明了一个模型，然后在下方添加一个项目 []（如果项目尚不存在）。这不是一个好的做法，可能会导致您出现问题。 Vue 需要知道它正在监视的对象的所有属性。它们需要在 Vue 第一次处理对象时存在，或者你需要 add them with Vue.set().

子组件中的 Vue 数组道具未更新

Vue array prop in child component not updating

javascript

vue.js

vue-component