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屋!