Vue читает v-bind: класс до вычисления

Question

Я использую v-for для отображения списка изображений в моем контейнере.После этого я вычисляю начальную и конечную позиции этих изображений, используя $refs в вычисляемом свойстве.

Проблема в том, что я хочу использовать v-bind:class="" для их анимации, но Vue читает это до того, как вычисляетсясвойство создано (мое предположение).

<img ref="imageAnimate" class="image-parts"
     v-for="(images, i) in finalImages"
     :src="images.full_image_url"
     :class="{animated: scroll >=animateHooks[i].animated}">

animateHooks() {
  let hooks = [];
  for (i=0; i < this.$refs.imageAnimate.length; i++) {
    let img = {
      start: this.$refs.imageAnimate[i].offsetTop,
      end: this.$refs.imageAnimate[i].offsetTop + this.$refs.imageAnimate[i].offsetHeight,
      animated: false
    };
    hooks.push(img);
  }
  return hooks;
}

Answer 1

Ваша проблема не в том, что вычисляемые свойства вычисляются после цикла рендеринга, а в том, что вы используете вычисляемое свойство, которое пытается найти элемент, который еще не был отрисован.

В первом цикле рендеринга, компонент еще не визуализирован.Он перебирает finalImages и пытается установить класс на основе вашего вычисляемого свойства.Поскольку ничего еще не было обработано, this.$refs пусто.Попытка получить длину этого приведет к «Невозможно получить длину свойства неопределенной».Одним из решений будет не цикл по ссылкам, а цикл finalImages, чтобы создать вычисляемое свойство.Я не уверен на 100%, если он пересчитает вычисленное свойство на основе this.$refs, но есть только один способ выяснить это.

animateHooks() {
  const refs = this.$refs.imageAnimate;

  return this.finalImages.map((image, index) => {
    const img = {
      start: refs ? refs[i].offsetTop : 0,
      end: refs ? (refs.offsetTop + refs[i].offsetHeight) : 0,
      animated: false
    };
    return img;
  });
}

Вы сможете получить доступ к $refsодин тик после начального рендеринга (например, внутри this.$nextTick(() => { ... });), но это бесполезно для вычисляемого свойства.