Question

我正在研究一个简单的图像滑块组件。在模板中，我使用v-for创建img代码，使用ref来保留对每个代码的引用。

Vue.component('slide', {
    template: `
    <div class="c-image-slider">
      <img ref="im" :key="image" class="c-image-slider__slide" v-for="image in images" :src="image">
    </div>
    `,
    data() {
      return {
        currentImage: 0,
        images: [],
      };
    },
    mounted() {
      this.images = images;
      console.log(this.$refs);
      console.log(this.$refs.im);
    },
  });

在组件的mounted()挂钩中，我正在尝试记录this.$refs.im数组，但结果是undefined，即使数组是定义的。我错过了什么？

这也是复制该问题的笔：https://codepen.io/anon/pen/LQMMBK

Answer 1

Re-renders are asychronous。在此处安装图像时设置：

this.images = images;

您触发重新渲染，但Vue不会立即执行此操作。之前，没有$refs，因为尚未呈现图片。

当您立即记录$refs时，其日志记录与该时间点的完全相同。然后发生计划的重新渲染，Vue填充$refs。

您可以使用$nextTick正确注销。

mounted() {
  this.images = images;
  this.$nextTick(() => {
    console.log(this.$refs);
    console.log(this.$refs.im);
  })
}

更新了pen。

Answer 2

尝试使用：

<base href="./">

ref数组里面的$ refs undefine里面的mount（）

2 个答案: