javascript - VueJs 对象键/值在 v-for 循环中不是 react 性的

Question

我有以下问题，我不知道如何正确解决。

我的 View 中有所有已购买图像的“列表”。我用 v-for 循环显示它们。每个图像还有进度条元素，因此当用户单击下载按钮时，将执行 downloadContent 函数并显示进度条。

所以我的 html 看起来像这样。

<section class="stripe">
    <div class="stripe__item card" v-for="(i, index) in purchasedImages">
        <progress-bar :val="i.download_progress"
                      v-if="i.download_progress > 0 && i.download_progress < 100"></progress-bar>
        <div class="card__wrapper">
            <img :src="'/'+i.thumb_path" class="card__img">
        </div>
        <div class="btn-img card__btn card__btn--left" @click="downloadContent(i.id_thumb, 'IMAGE', index)">
        </div>
    </div>
</section>

这是我的 JS 代码

import Vue from 'vue'
import orderService from '../api-services/order.service';
import downloadJs from 'downloadjs';
import ProgressBar from 'vue-simple-progress';

export default {
    name: "MyLocations",
    components: {
        ProgressBar: ProgressBar
    },
    data() {
        return {
            purchasedImages: {},
            purchasedImagesVisible: false,
        }
    },
    methods: {
        getUserPurchasedContent() {
            orderService.getPurchasedContent()
                .then((response) => {
                    if (response.status === 200) {

                        let data = response.data;
                        this.purchasedImages = data.images;

                        if (this.purchasedImages.length > 0) {
                            this.purchasedImagesVisible = true;
                            // Set download progress property
                            let self = this;
                            this.purchasedImages.forEach(function (value, key) {
                                self.purchasedImages[key].download_progress = 0;
                            });
                        }
                    }
                })
        },
        downloadContent(id, type, index) {
            let self = this;
            orderService.downloadContent(id, type)
                .then((response) => {
                    let download = downloadJs(response.data.link);
                    download.onprogress = function (e) {
                        if (e.lengthComputable) {
                            let percent =  e.loaded / e.total * 100;
                            let percentage = Math.round(percent);
                            if (type === 'IMAGE') {
                            // Is this proper way to set one field reactive?
                         self.purchasedImages[index].download_progress = percentage;
                                if (percentage === 100) {
                                    self.purchasedImages[index].download_progress = 0;
                                }
                            }
                        }
                    }
                })
        },
    },
    mounted: function () {
        this.getUserPurchasedContent();
    }
};

那么问题来了。当用户点击下载按钮时，下载开始执行，我得到了下载的内容，但我没有看到进度条。所以我想知道，这是设置元素 react 性的正确方法吗？我的实现应该是什么样的？如何正确设置 self.purchasedImages[index].download_progress 对象键值，使进度条可见？

如果您需要任何其他信息，请告诉我，我会提供。谢谢!

Answer 1

片段:

this.purchasedImages = data.images;

让我们相信 data.images 是一组没有 download_progress 属性的对象。所以 Vue 在变化时无法检测/ react 。

要解决这个问题，您可以使用 Vue.set:

Vue.set(self.purchasedImages[key], 'download_progress', 0);

这在 Vue.js docs 中有很好的解释.

另一种选择:在分配给 data 之前添加属性

为了完整性，您还可以添加 download_progress before 将数组分配给 data 属性。这将使 Vue 注意到它并能够对其使用react。

例子:

let data = response.data;
this.purchasedImages = data.images.map(i => ({...i, download_progress: 0}));

if (this.purchasedImages.length > 0) {
    this.purchasedImagesVisible = true;
    // no need to set download_progress here as it was already set above
}

// if above could also be simplified to just:
this.purchasedImagesVisible = this.purchasedImages.length;

---

附带说明一下，因为它是一个数组而不是一个对象，我建议你这样声明它:

data() {
    return {
        purchasedImages: [], // was: {},

这不会有任何效果，因为您在 (this.purchasedImages = data.images;) 中完全覆盖了 purchasedImages，但这是一个很好的做法，因为它记录了属性的类型。