如何观察对象何时具有新属性答案

【问题标题】：How to watch when object has a new property如何观察对象何时具有新属性
【发布时间】：2017-03-28 08:29:26
【问题描述】：

简单的问题：当一个对象作为新属性时是否可以观察？

在 JSFiddle 中，我只初始化列表中第一项的属性“显示”。当我点击第一个项目的“切换”时，它可以工作。

但对于其他项目（动态获取“显示”属性）和 myObject（动态获取“test2”属性），仅当您切换列表的第一项时才会刷新！

在我的情况下，我希望切换立即生效。

有人解释一下吗？

new Vue({
  el: "#app",
  data: function()  {
    return {
    	myObject: { test: 'test' },
      list: [{
        value: 1,
        show: true
      }, {
        value: 2
      }, {
        value: 3
      }, {
        value: 4
      }, {
        value: 5
      }]
    }
  },
  methods: {
    toggleItem: function( item ) {
    	if( !item.show ) item.show = true;
    	else item.show = !item.show;
      console.log(item.show)
      this.myObject.test2 = 'test2';
    }
  },
  watch: {
  	list: function( newValue ) {
    	console.log('NEW VALUE: ', newValue );
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.5/vue.js"></script>

<div id="app">
{{ myObject }}
  <div v-for="item in list">
    <span v-if="item.show">
      {{ item.value }}
    </span>
    <button @click="toggleItem(item)" type="button">Toggle !</button>
  </div>
</div>

【问题讨论】：

我认为你需要的是使用Vue.set：vuejs.org/v2/api/#Vue-set
非常感谢！

标签： vue.js vuejs2

【解决方案1】：

为了帮助 Vue 获取新属性，您必须使用 Vue.set() / this.$set 来添加它们。否则，Vue 无法检测到添加，新属性将不会反应。

if( !item.show ) this.$set(item, 'show', true)

https://vuejs.org/v2/api/#Vue-set

一般情况下，我们强烈建议您事先在data() 中设置所有属性

【讨论】：