Javascript Vue在数据更改时不更新。

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

HTML:

{{vehicle.id}

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'
        }
      }
    }
});

window.panel=新的Vue({
el:“#应用程序”，
数据：{
车辆：{}
},
已创建：函数（）{
//创建虚拟车辆
对于（变量i=0；i<4；i++）{
本车[i]=本假人（i）；
}
},
方法：{
添加：函数（）{
让索引=Object.keys（this.vehicles）.length；
设dummy=this.dummy（索引）；
this.vehicles[对象.键（this.vehicles）.长度]=假人；
},
虚拟：功能（i）{
返回{
“dummy”：对，
“body”：“loading”，
“燃料类型”：“装载”，
“齿轮箱类型”：“加载”，
'id'：'loading'+i，
“image”：“/assets/images/themev2/compare dummy.gif”，
'image_id'：'loading'，
“make”：“loading”，
“模型”：“加载”，
“位置名称”：“正在加载”，
“变量”：“正在加载”，
“网络价格”：“加载”
}
}
}
});

使用

代替

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

---

这似乎是可行的，为什么我需要使用

Vue.set

，在文档示例中，我可以正常添加一个对象？是否因为我的

车辆

数据是一个对象而不是一把钥匙？Vue不允许向已创建的实例动态添加新的根级别被动属性。但是，可以使用Vue.set（object，key，value）方法向嵌套对象添加被动属性：来自官方文档。警告：：由于JavaScript的限制，Vue无法检测到对数组的以下更改：当您直接使用索引设置项时，例如当您修改数组的长度时，vm.items[indexOfItem]=newValue，例如vm.items.length=newLength

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

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