@stimul777

Почему не обновляется DOM?

Всем привет.
Делаю компонент загрузки фоток со статусом прогресса(аксиос).
Все работает, но статус прогресса не обновляется сам, т.е ничего не происходит. НО если в шаблон кинуть переменную с отрисовкой ее в ДОМе(счетчик, например) - статус прогресса начинает нормально обновляться.
Как это решить?

<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,
    },
  },
};
  • Вопрос задан
  • 67 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы