Vue在计算之前先读取v-bind：class

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(() => { ... });内部），但这在计算属性中没有用。