VueJs 개체 키/값이 v-for 루프에서 반응하지 않음

VueJs 개체 키/값이 v-for 루프에서 반응하지 않음

나는 다음 문제가 있는데, 어떻게 해야 제대로 다루어야 할지 모르겠다.

구입한 모든 이미지의 "목록"이 내 시야에 가지고 있다.나는 그것들을 v-for loop으로 표시한다.각 이미지에는 진행 막대 요소도 있어 사용자가 다운로드 버튼을 클릭하면 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();
    }
};

그래서 문제는.사용자가 다운로드 버튼을 클릭하면 다운로드가 시작되고 콘텐츠가 다운로드되는데 진행 표시줄이 보이지 않는다.그래서 나는 이것이 원소를 반응적으로 만드는 적절한 방법일까?내 구현 방식은 어떻게 보여야 하는가?올바르게 설정하는 방법self.purchasedImages[index].download_progress개체 키 값. 진행률 표시줄이 표시되는가?

추가 정보가 필요하시면 알려주시면 제공하겠다.고마워!

코드 조각:

this.purchasedImages = data.images;

우리를 믿게 만든다.data.images다음이 없는 개체의 배열download_progress재산그래서 Vue는 그것이 변할 때 감지/재작용을 할 수 없다.

이 문제를 해결하려면Vue.set:

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

이것은 Vue.js 문서에 잘 설명되어 있다.

다른 옵션: 할당하기 전에 속성 추가data

단지 완벽함을 위해서, 당신은 또한 더하기 위해download_progress 어레이를 에 할당하기 전에data재산이것은 Vue가 그것을 알아차리고 그것에 반응할 수 있게 해줄 것이다.

예:

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: {},

덮어쓰기 때문에 이 작업은 영향을 미치지 않음purchasedImages완전히 ()로this.purchasedImages = data.images;)) 그러나 그것은 재산의 종류를 문서화하는 것이기 때문에 좋은 관행이다.

참조URL: https://stackoverflow.com/questions/56556486/vuejs-object-key-value-is-not-reactive-in-v-for-loop