vue.js 更新数组后不更新 DOM答案

【问题标题】：vue.js is not updating the DOM after updating the arrayvue.js 更新数组后不更新 DOM
【发布时间】：2017-02-09 05:10:31
【问题描述】：

我通过 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>

activeSparepart 对象在这里初始化：

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

Vue devTools 显示如下：

【问题讨论】：

提供 jsFiddle 因为不可能知道你在模板中做什么
我将模板添加到问题中。
你的activeSparepart是如何在组件中定义的？
我在 vue ready 上调用了 resetSparepart 方法
我不明白的一点是，vue devtools 在 activeSparepart.attachments 中显示正确的内容

标签： javascript arrays vue.js

【解决方案1】：

我认为问题在于您的activeSparepart.attachments 没有反应。

了解Change Detection Caveats in Vue: For Arrays 以获得简短答案，或了解Vue Reactivity in Depth。

如果activeSparepart 是一个对象并且您添加属性attachments，则无法识别附件...

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

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

【讨论】：

完美！太感谢了！ +1

【解决方案2】：

请记住，您将 Vue.js 组件数据定义为函数返回一个全新的对象以防止数据与其他组件共享。如果你想修改一个数组，你需要先得到整个东西，做出改变，然后把整个东西放回去。

var list = vm.activeSparepart.attachments;
for (var i=0; i < data.files.length; i++) {
    list.push({ filename: data.files[i] });
}
vm.activeSparepart.attachments = list;

【讨论】：

array.push() 将检测更改并提供响应
还是一样的结果:(
哎呀……对不起我的坏事