vue.js is not updating the DOM after updating the array

Question

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:

Provide jsFiddle because it's impossible to know what you are doing in the template — Primoz Rome
– Primoz Rome, Commented Sep 30, 2016 at 15:20
the point i don't understand ist, that the vue devtools show the correct content in activeSparepart.attachments — user6905325
– user6905325, Commented Sep 30, 2016 at 15:36

elbowlobstercowstand · Accepted Answer · 2021-03-01 19:25:08Z

13

I 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', [])

edited Mar 1, 2021 at 19:25

elbowlobstercowstand

3,9611 gold badge27 silver badges22 bronze badges

answered Sep 30, 2016 at 15:39

Primoz Rome

11.1k19 gold badges83 silver badges114 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user6905325 Over a year ago

Perfect! Thank you so much! +1

minagawah · Accepted Answer · 2016-09-30 15:33:03Z

0

Remember that you define Vue.js component data as a function returning a whole new object to prevent the data been shared with other components. 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;

edited Sep 30, 2016 at 15:33

answered Sep 30, 2016 at 15:27

minagawah

952 silver badges9 bronze badges

3 Comments

Primoz Rome Over a year ago

array.push() will detect changes and offer reactivity

user6905325 Over a year ago

still the same result :(

minagawah Over a year ago

gee... sorry my bad

Collectives™ on Stack Overflow

vue.js is not updating the DOM after updating the array

2 Answers 2

1 Comment

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related