javascript - 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

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

您似乎希望在数组发生变化时收到通知，并且它在此处发生变化:

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

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

如果您希望 Vue 能够响应此数组上的更改并且需要动态设置属性，您需要:

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

所以这会变成这样:

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

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