Vuejs can't access refs from component

Question

I am trying to get the canvas element which is inside a template of a component, found great documentations for vuejs1 but not for vuejs2 where "ref" is the only way to get the element. I am getting the object though, but when I try to access the variable it is undefined.

HTML

<div id="app>
  <template id="image-capture">
    <div class="row" >
      <canvas ref="icanvas" ></canvas>
    </div>
  </template>
</div>

JS

const ic = {
  template: '#image-capture' ,
   
  created () {
    console.log(this.$refs); //this returns object
    console.log(this.$refs.icanvas); // but this is undefined
  }
}

const routes = [
  { path: '/ic', component:   ic},
]

const router = new VueRouter({
  routes 
})

 new Vue({
  router,
   }).

$mount('#app')

I need to get the icanvas element.

Answer 1

The created is fired before the template is processed.
You can find more details here: https://vuejs.org/v2/guide/instance.html#Lifecycle-Diagram

You should be able to access the $refs on the mounted event

mounted: function() {
    console.log(this.$refs.icanvas);
},

Answer 2

You can use $nextTick() function, code inside $nextTick() will run after DOM update.

this.$nextTick(function () {

    console.log(this.$refs.ANY_COMPONENT_REF)

})

Answer 3

i had the exact same issue, in my case i solved it by accessing the ref in the method that changes the v-if with nextTick.

methods: {
open() {
  this.show = true; //v-if condition
    this.$nextTick(function() {
      this.titleWidth = this.$refs.titleBg.clientWidth - 30;
    });
}

Answer 4

@Dan Levin 's answer works.

methods: {
fecthData() {
    this.data ={ ... }; // assume the fetched data have changed DOM here.

    this.$nextTick(() => {
      console.log(this.$refs); // returns obj
      console.log(this.$refs.target); // returns el
    });
}

this works also with v-for.

Answer 5

I also ran into this error. The way i fixed this issue was by getting the refs in the updated hook. See my example below.

In my data object I have an empty array called 'products'.

data() {
    return {
        products: []
    }
}

In the updated hook I check if any refs are found. If not then nothing will happen. Then when there are products found, the script will continue. Next time Vue will come into the updated hook again, your script won't be triggerd again because now the length of the products array is bigger than one (if any refs could be found of course).

updated() {
    let products = this.$refs.products;
    if (!products || this.products.length > 0) return;

    this.products = products;
    // run your logic here
}

Answer 6

In may case, I use v-for like:

<li class="list__item" v-for="(item,index) in pubList" :key="index">
   <img
      class="list__img lazy_image"
      ref="lazyImages"
    >
</li>

And

 //pubList is from ajax
 props: ['pubList'],

In this case, I solve this by:

  watch: {
    'pubList': {
        handler:function(newArray) {
             if(newArray.length===0){
                return
              }
             this.$nextTick(function() {
               console.log(this.$refs.lazyImages)
             })
          },
       immediate:true
    }
  }

Answer 7

To point at vue instance to self variable worked for me, info source

created() {
    let self = this;
    console.log(self.$refs.icanvas);
},