vue.js 更新数组后没有更新 DOM

我通过 AJAX 读取项目列表并将其推送到数据数组中：

loadSparepartFiles: function() {
    var vm = this;
    vm.activeSparepart.attachments = [];
    ajaxApi.loadJson('spareparts/sparepart/getFiles/'+vm.activeSparepartId, function(data) {
        for (var i = 0; i < data.files.length; i++) {
            vm.activeSparepart.attachments.push({
                filename: data.files[i]
            });
        }
    });
},

在 Chrome 中的 Vue devTools 中，我可以看到更新后的数据数组，但 DOM 列表仍然为空。

模板：

<div v-for="file in activeSparepart.attachments" class="uk-width-1-2 uk-margin-bottom">
    <a href="{{ baseUrl }}/download/sparepart/{{ activeSparepartId }}/{{ file.filename }}" target="hidden-frame" class="block-link">
        <i class="delete uk-icon-remove"></i>
        <i class="icon uk-icon-image"></i>
        <span class="title">
            {{ file.filename }}
        </span>
    </a>
</div>

The activeSparepart对象在这里初始化：

resetSparepart: function() {
    this.activeSparepart = {
        alternates: [],
        locations: [],
        logs: [],
        usages: [],
        vendors: [],
        sparepart: {},
        attachments: []
    };
    this.activeSparepartId = 'new';
},

Vue devTools 显示以下内容：

我认为问题在于你的activeSparepart.attachments不是反应性的。

阅读Vue 中的更改检测注意事项：对于数组简短的回答，或了解Vue 深度反应性.

If activeSparepart是一个对象并且您添加属性attachments附件将无法被识别...

Vue 不允许向已创建的实例动态添加新的根级响应式属性。但是，可以使用 Vue.set(object, key, value) 方法向嵌套对象添加响应式属性：

Vue.set(vm.activeSparepart, 'attachments', [])