Vue Js 没有第一次使用更新的数组更新 DOM

Question

我想在上传图片时进行图片预览。

我能够在数组中获取图像的路径，但是当我第一次上传图像时，数组没有更新。

当检查 vue devtools 时，它会更新数组但图像不预览。

当我上传图片时，数组应该立即更新。但它不更新。

如果我使用 vue devtools 查看我的数组，该数组会更新。

这是我的代码：

html

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

脚本

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);
        },

    },

}

这是一个截图：

Answer 1

这通常是一个反应性问题，因为您的数组确实更新了，但 Vue 没有收到通知，因此不会重新渲染。

如果数组发生更改，您似乎希望收到通知，并且此处发生更改：

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

此时您正在设置属性 x，但 Vue 永远不会接受这一点，因为 Vue 不会为您在初始化后添加的属性创建 getter 和 setter。

如果你希望 Vue 能够响应这个数组的变化并且你需要动态设置你的属性，你需要：

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

所以这会变成这样：

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

这应该可以解决您的问题。如果它不起作用，请告诉我。