Vue Js not updating DOM first time with updated array

Question

I want to make a image preview when upload images.

I was able to get the path of image in an array, but the array does not update the first time when I upload an image.

When check the vue devtools, it updates the array but the image doesn't preview.

When I upload images, the array should updated immediately. But it doesn't update.

If I view my array with the vue devtools, the array does update.

Here is my code:

html

<div class='row'>
   <div v-for="item in itemsImages">{{item}}</div>
</div>

script

export default {

data() {
        return {
            items: [],
            itemsAdded: '',
            itemsNames: [],
            itemsSizes: [],
            itemsImages: [],
            itemsTotalSize: '',
            formData: '',
        },
        methods: {
           onChange(e) {
            this.successMsg = '';
            this.errorMsg = '';
            this.formData = new FormData();
            let files = e.target.files || e.dataTransfer.files;
            this.itemsAdded = files.length;
            let fileSizes = 0;
            var vm = this;
            for (let x in files) {
                if (!isNaN(x)) {
                    this.items = e.target.files[x] || 
                    e.dataTransfer.files[x];
                    this.itemsNames[x] = files[x].name;
                    this.itemsSizes[x] = this.bytesToSize(files[x].size);
                    fileSizes += files[x].size;

                    var reader = new FileReader();
                    reader.onload = (event) => {
                        vm.itemsImages[x] = event.target.result;
                    };
                    reader.readAsDataURL(files[x]);
                    this.formData.append('items[]', this.items);

                }
            }
            this.itemsTotalSize = this.bytesToSize(fileSizes);
        },

    },

}

here is an screenshot:

Possible duplicate of [Vue.js - updated array item value doesn't update in page](https://stackoverflow.com/questions/44800470/vue-js-updated-array-item-value-doesnt-update-in-page) — choasia, Aug 04 '17 at 10:09

score 3 · Accepted Answer · edited Jul 15 '22 at 05:38

This is usually a reactivity issue since your array does update but Vue is not notified of this and therefore does not re-render.

It seems that you want to be notified if the array changes and it changes here:

vm.itemsImages[x] = event.target.result;

You are setting property x at this moment but Vue will never pick up on this because Vue does not create getters and setters for properties you add after initialization.

If you want Vue to be able to respond to changes on this array and you need to dynamically set your properties, you need:

https://v2.vuejs.org/v2/api/#Vue-set

So this will become something like:

this.$set(vm.itemsImages, x, event.target.result)

This should probably fix your issue. Let me know if it doesn't work.

Vue Js not updating DOM first time with updated array

1 Answers1