Answer the question
In order to leave comments, you need to log in
Why is the DOM not updating?
Hello.
I am making a photo upload component with a progress status (axios).
Everything works, but the progress status does not update itself, i.e. nothing happens. BUT if you throw a variable into the template with its rendering in the DOM (counter, for example) - the progress status starts to update normally.
How to solve it?
<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,
},
},
};
Answer the question
In order to leave comments, you need to log in
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question