vue.js在更新数组后未更新DOM [英] vue.js is not updating the DOM after updating the array

问题描述

我通过AJAX读取了项目列表，并将其推入数据数组:

I read a list of items via AJAX and push it into a data Array:

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列表仍然为空.

In the Vue devTools in Chrome I can see the updated data array, but the DOM list is still empty.

模板:

<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显示以下内容:

Vue devTools shows the following:

推荐答案

我认为问题是您的activeSparepart.attachments没有反应.阅读此 http://rc.vuejs.org/guide/reactivity.html #Change-Detction-Caveats .

I think the problem is that your activeSparepart.attachments is not reactive. Read this http://rc.vuejs.org/guide/reactivity.html#Change-Detection-Caveats.

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

If activeSparepart is an object and you add property attachments the attachments will not be recognised...

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

Vue does not allow dynamically adding new root-level reactive properties to an already created instance. However, it’s possible to add reactive properties to a nested object using the Vue.set(object, key, value) method:

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

这篇关于vue.js在更新数组后未更新DOM的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！