Всем привет.
Делаю компонент загрузки фоток со статусом прогресса(аксиос).
Все работает, но статус прогресса не обновляется сам, т.е ничего не происходит. НО если в шаблон кинуть переменную с отрисовкой ее в ДОМе(счетчик, например) - статус прогресса начинает нормально обновляться.
Как это решить?
<template>
<v-container class="container" fluid>
<div class="wrapper">
<p v-show="photos.length != 0" class="counter"></p>
<transition-group name="list" class="wrapper-animations">
<div v-for="(item, index) in photos" :key="item.file.name">
<!-- Загружено: {{ counter }} -->
<v-img
class="img"
:src="item.progressEvent.target.result"
:gradient="item.file.gradient"
>
<svg-icon class="close" :name="'close'" @click="removeImg(index)" />
<v-progress-circular
v-if="item.file.showProgress"
:value="item.file.uploadProgress"
:rotate="-90"
:size="60"
:width="5"
color="#e30613"
class="loader"
>
</v-progress-circular>
</v-img>
</div>
</transition-group>
</div>
</v-container>
</template>
export default {
name: "UiGallerySingle",
props: {
selectPhotos: {
type: Array,
default: () => [],
},
// если включить счетчик - дом обновляется
// counter: {
// type: Number,
// default: 0,
// },
},
data: () => ({
photos: [],
}),
methods: {
removeImg(index) {
this.photos.splice(index, 1);
},
},
watch: {
//todo progressEvent - бинарник
selectPhotos: {
handler: function () {
console.log("Watch!!!");
[...this.selectPhotos].forEach((file) => {
const reader = new FileReader();
(reader.onload = (progressEvent) =>
this.photos.push({ progressEvent, file })),
reader.readAsDataURL(file);
});
console.log("!!!this.photos", this.photos);
},
immediate: true,
deep: true,
},
},
};