Question

我对VueJS很新，所以期待这是我的问题，但希望得到一些指导。

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

＆＃13;

    new Vue({
    el: '#app',
    data: {
      people: {
        Dave: {'Age': 30, 'Plays': 5}
      }
    },

    mounted: function() {
      this.people['Rob'] = {'Age': 22, 'Plays': 24};
    }
    });

＆＃13;

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

＆＃13;

我觉得这可能是一个Vue陷阱，或者我做了一些非常愚蠢的事情。

Answer 1

这是由于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，以便将来不会遇到任何问题

Answer 2

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

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

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

VueJS没有接收通过的数据

2 个答案: