Выполнить код после рендеринга всех изображений в vuejs

Question

Я хочу выполнить код после загрузки всех изображений (необходимо установить прокрутку в определенной позиции).Я использую nextTik (), но коды обрабатываются перед загрузкой изображений.Мы также не можем использовать смонтированные и созданные и подобные методы, потому что коды должны выполняться после нажатия на кнопку.Есть ли способ или хитрость?спасибо

Answer 1

Вы можете использовать событие load на каждом изображении, чтобы проверить, были ли загружены все изображения.

пример: https://jsfiddle.net/jacobgoh101/e5bd86k6/1/

<div id="app">
  <img @load="handleLoad"  @error="handleLoad" v-for="i in 10" :src="`https://picsum.photos/${Math.random()*300}/700/?random`"/>
</div>

Javascript

new Vue({
  el: "#app",
  data: {
    imgLoaded: 0
  },
  methods: {
    handleLoad: function(todo){
        this.imgLoaded++;
      if(this.imgLoaded === 10) {
        alert('all image loaded')   
      }
    }
  }
})