vue.js - Vue refs 在模态中未定义

Question

我确实有一个 for 循环，在里面我想为每个图像都有一个模态

  <div class="col pb-3" v-for="(item, index ) in img" :key="index" style="width: 300px;height:auto;">
    <img  v-b-modal="'modal-'+index" :ref="'image'" @mouseover="mouseOver" @mouseleave="mouseOut"  /><br>
    <b-modal :id="'modal-'+index" title="BootstrapVue">
      <p  class="my-4">Hello from modal - {{index}}</p>
      <img :ref="'imagex'" />
    </b-modal>
    <div class="progress pt-2 mt-1" style="width: 100px;margin: 0 auto;">
      <div class="progress-bar " :style="[{'width':width[index]+'px'}]" role="progressbar"
           aria-valuenow="0" ref="'progress'" aria-valuemin="0" aria-valuemax="100"></div>
    </div>
  </div>

在方法中，我为每个具有 :ref="'image'" 的图像赋予 src 值我实际上可以给他们一个 src 它的工作正常但是，我也希望能够在模态中提供 src 值图像。它叫 :ref="'imagex'"但它未定义。

this.$refs.image[i].src = event.target.result //works
this.$refs.imagex[i].src = event.target.result //undefined

有什么问题可以解决吗？

Answer 1

当使用 v-for 用于元素/组件时，注册的引用将是一个包含 DOM 节点或组件实例的数组。
一个 重要 注意 ref 注册时间:因为 ref 本身是作为 render 函数的结果创建的，所以您无法在初始渲染时访问它们 - 它们还不存在! $refs 也是非 react 性的，因此您不应尝试在模板中使用它来进行数据绑定(bind)。
.
可以在事件中使用它，并且只能在挂载的函数中使用。
https://vuejs.org/v2/api/#ref