S
S
stimul7772021-08-30 00:30:48
Vue.js
stimul777, 2021-08-30 00:30:48

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 question

Ask a Question

731 491 924 answers to any question