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.

My html

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

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

回答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);
},

回答2:

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

this.$nextTick(function () {

    console.log(this.$refs.ANY_COMPONENT_REF)

})

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

回答4:

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

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

来源：https://stackoverflow.com/questions/40884194/vuejs-cant-access-refs-from-component

标签

Vue.js

vuejs2

vue-component