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

Posted 2023-02-22

【中文标题】vue.js 更新数组后不更新 DOM

【英文标题】：vue.js is not updating the DOM after updating the array

【发布时间】：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 中显示正确的内容

【参考方案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() 将检测更改并提供响应

还是一样的结果:(

哎呀……对不起我的坏事