Question

在vue.js中，您可以迭代模板中的一系列项目，如下所示：

<div id="app">
  <div v-for="(item, i) in items">i: item</div>
</div>

<script>
  var example2 = new Vue({
    el: '#app',
    data: {
        items: ['one', 'two', 'three']
    }
  })
</script>

通过实验，我还发现你可以用对象而不是数组做类似的事情：

<div id="app">
    <div v-for="(item, i) in items">i: item</div>
</div>

<script>
  var example2 = new Vue({
    el: '#app',
    data: {
      items: {one: 'one', two: 'two', three: 'three'}
    }
  })
</script>

如果要添加到数组，可以执行example2.items.push('four')之类的操作，vue.js会通过插入另一个DOM元素来做出反应。但是，你将如何将另一个项目插入到一个对象中，而不是像vue.js那样对数组做出同样的反应？你不能使用push方法，因为它不适用于通用对象，所以我还在尝试这样的事情：

example2.items.four = 'four'

但是vue.js没有检测到这种变化，因此没有新的元素插入到DOM中。我的问题是：如何插入新对象？

Answer 1

你必须像这样使用set：

this.$set(this.myObject, 'newKey', { cool: 'its my new object' })

您也可以使用Object.assign：

let newObject = { newKey: { cool: 'its my new object' }}
this.myObject = Object.assign({}, this.myObject, newObject)

更多：https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats

Answer 2

嗯，我太早问了。我找到了以下文档来回答我的问题。 “对象更改检测警告”，请参见此处：https://vuejs.org/v2/guide/list.html

如何在组件中添加/扩展对象

2 个答案: