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]
});
}
});
},
In the Vue devTools in Chrome I can see the updated data array, but the DOM list is still empty.
The template:
<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 Object is initialised here:
resetSparepart: function() {
this.activeSparepart = {
alternates: [],
locations: [],
logs: [],
usages: [],
vendors: [],
sparepart: {},
attachments: []
};
this.activeSparepartId = 'new';
},
Vue devTools shows the following:
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]
});
}
});
},
In the Vue devTools in Chrome I can see the updated data array, but the DOM list is still empty.
The template:
<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 Object is initialised here:
resetSparepart: function() {
this.activeSparepart = {
alternates: [],
locations: [],
logs: [],
usages: [],
vendors: [],
sparepart: {},
attachments: []
};
this.activeSparepartId = 'new';
},
Vue devTools shows the following:
Share Improve this question edited Jun 7, 2018 at 9:21 Antti29 3,03112 gold badges36 silver badges36 bronze badges asked Sep 30, 2016 at 15:05 user6905325user6905325 831 silver badge5 bronze badges 5- Provide jsFiddle because it's impossible to know what you are doing in the template – Primoz Rome Commented Sep 30, 2016 at 15:20
- I added the template to the question. – user6905325 Commented Sep 30, 2016 at 15:24
-
how is your
activeSparepartdefined in the ponent? – Primoz Rome Commented Sep 30, 2016 at 15:32 - i call the resetSparepart method on vue ready – user6905325 Commented Sep 30, 2016 at 15:35
- the point i don't understand ist, that the vue devtools show the correct content in activeSparepart.attachments – user6905325 Commented Sep 30, 2016 at 15:36
2 Answers
Reset to default 13I think the problem is that your activeSparepart.attachments is not reactive.
Read about Change Detection Caveats in Vue: For Arrays for the short answer, or learn about Vue Reactivity in Depth.
If activeSparepart is an object and you add property attachments the attachments will not be recognised...
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', [])
Remember that you define Vue.js ponent data as a function returning a whole new object to prevent the data been shared with other ponents. If you wish to modify an array, you need to first get the whole thing, make changes, and put the whole thing back again.
var list = vm.activeSparepart.attachments;
for (var i=0; i < data.files.length; i++) {
list.push({ filename: data.files[i] });
}
vm.activeSparepart.attachments = list;