CODEWITHSUNDEEP
vue.jsvuejs2vue-component
Code Tree
Code Tree

Reputation: 2209

Vuejs can't access refs from component

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.

here is console log

Upvotes: 48

Views: 105308

Answers (7)

Mihai Vilcu
Mihai Vilcu

Reputation: 1967

The created is fired before the template is processed.
You can find more details here: https://v2.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);
},

Upvotes: 50

Yujin Choi
Yujin Choi

Reputation: 91

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

Upvotes: 5

Francisco Rode&#241;o Sanchez
Francisco Rode&#241;o Sanchez

Reputation: 717

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

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

Upvotes: 0

anVeNiQ
anVeNiQ

Reputation: 31

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
}

Upvotes: 3

xianshenglu
xianshenglu

Reputation: 5309

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

Upvotes: 0

Dan Levin
Dan Levin

Reputation: 714

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;
    });
}

Upvotes: 13

Kishan Madhesiya
Kishan Madhesiya

Reputation: 357

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

this.$nextTick(function () {

    console.log(this.$refs.ANY_COMPONENT_REF)

})

Upvotes: 29

Related Questions