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)

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

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

1 个答案: