数据更改时Vue不会更新。

Question

我遇到一个奇怪的问题，当我在Vue实例中更改数据时，HTML不会更新：

CodePen

HTML：

<div class="favourites-panel__wrapper" id="app">
  <ul>
    <li v-for="(vehicle, index) in vehicles">{{ vehicle.id }}</li>
  </ul>
  <a href="javascript:void(0);" v-on:click="add()">Add</a>
</div>

JavaScript：

window.panel = new Vue({
    el: '#app',
    data: {
        vehicles: {}
    },
    created: function() {

        // Create dummy vehicles
        for (var i = 0; i < 4; i++) {
            this.vehicles[i] = this.dummy(i);
        }

    },
    methods: {
      add: function() {
        let index = Object.keys(this.vehicles).length;
        let dummy = this.dummy(index);

        this.vehicles[Object.keys(this.vehicles).length] = dummy;
      },
      dummy: function(i) {
        return {
          'dummy': true,
          'body': 'loading',
          'fuel_type': 'loading',
          'gearbox_type': 'loading',
          'id': 'loading' + i,
          'image': '/assets/images/themev2/compare-dummy.gif',
          'image_id': 'loading',
          'make': 'loading',
          'model': 'loading',
          'location_name': 'loading',
          'variant': 'loading',
          'web_price': 'loading'
        }
      }
    }
});

Answer 1

使用

Vue.set(this.vehicles, Object.keys(this.vehicles).length, dummy);

安装

this.vehicles[Object.keys(this.vehicles).length] = dummy;