CODEWITHSUNDEEP
vue.jsbootstrap-modal
Atif Şeşu
Atif Şeşu

Reputation: 125

Vue refs undefined in modal

I do have a for loop and inside i want to have a modal for each image

  <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>

In methods i am giving src value to each image that has :ref="'image'" and i can actually give a src to them its work fine but, i also want be able to give src value images in modal. Its called :ref="'imagex'" but its undefined.

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

What is the problem an is there anyway to solve it ?

Upvotes: 4

Views: 2535

Answers (1)

Abdelrhman Gemi
Abdelrhman Gemi

Reputation: 171

When used on elements/components with v-for, the registered reference will be an Array containing DOM nodes or component instances.

An important note about the ref registration timing: because the refs themselves are created as a result of the render function, you cannot access them on the initial render - they don’t exist yet! $refs is also non-reactive, therefore you should not attempt to use it in templates for data-binding. . can use it in events and only at mounted function.

https://v2.vuejs.org/v2/api/#ref

Upvotes: 2

Related Questions