VueJS没有拾取传递的数据答案

【问题标题】：VueJS not picking up data passedVueJS没有拾取传递的数据
【发布时间】：2018-01-01 14:26:27
【问题描述】：

我对 VueJS 很陌生，所以预计这是我自己的问题，但希望得到一些指导。

我有一个 Vue 实例，数据中的 person 对象包含一些预定义的数据，但我在安装时添加到该对象。无论出于何种原因，我都无法理解它不会使用安装时插入的数据来更新 DOM。我已经检查了 vue 应用，可以确认在挂载方法上添加的人被正确添加。

    new Vue({
    el: '#app',
    data: {
      people: {
        Dave: {'Age': 30, 'Plays': 5}
      }
    },

    mounted: function() {
      this.people['Rob'] = {'Age': 22, 'Plays': 24};
    }
    });

<script src="https://unpkg.com/vue"></script>
<div id="app">
  <ul>
    <li v-for="(person, key) in people">
      {{ key }}: {{ person.Age }}
    </li>
  </ul>
</div>

我觉得这要么是 Vue 的陷阱，要么是我在做一些非常愚蠢的事情。

【问题讨论】：

标签： javascript vue.js vuejs2

【解决方案1】：

或者使用在安装元素之前触发的钩子。

new Vue({
  el: '#app',
  data: {
    people: {
      Dave: {'Age': 30, 'Plays': 5}
    }
  },

  created: function() {
    this.people['Rob'] = {'Age': 22, 'Plays': 24};
  }
});

【讨论】：

但是 v-for 不应该是被动的吗？据我所知，当数据中添加了其他项目时，它应该会自动更新列表。
安装元素后，您需要使用 Vue 的 $set 或 $delete 方法在人物模型中添加或删除对象。或者使用在安装元素之前触发的任何钩子。

【解决方案2】：

这是由于change detection caveat

相反，您应该这样做：

new Vue({
el: '#app',
data: {
  people: {
    Dave: {'Age': 30, 'Plays': 5}
  }
},

mounted: function() {
  this.$set(this.people, 'Rob', Object.assign({}, { 'Age': 22, 'Plays': 24}));
 }
});

这里是fiddle

我还建议你通过array change caveats，这样你以后就不会遇到任何问题了

【讨论】：

谢谢，我以为我做错了什么。我现在将阅读这些内容。
@Paradigm 乐于提供帮助:)