Vuejs не может обращаться к refs от компонента

Я пытаюсь получить элемент canvas, который находится внутри шаблона компонента, нашел отличные документы для vuejs1, но не для vuejs2, где "ref" - единственный способ получить элемент. Я получаю объект, но, когда я пытаюсь получить доступ к переменной, это 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')

Мне нужно получить элемент icanvas.

Ответы

Ответ 1

created запускается до обработки шаблона.
Вы можете найти более подробную информацию здесь: https://vuejs.org/v2/guide/instance.html#Lifecycle-Diagram

Вы должны иметь доступ к $refs в событии mounted

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

Ответ 2

Вы можете использовать функцию $ nextTick(), код внутри $ nextTick() будет запускаться после обновления DOM.

this.$nextTick(function () {

    console.log(this.$refs.ANY_COMPONENT_REF)

})

Ответ 3

у меня была точно такая же проблема, в моем случае я решил ее, обратившись к ссылке в методе, который изменяет v-if с помощью nextTick.

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

Ответ 4

В любом случае я использую v-for, например:

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

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

В этом случае я решаю это следующим образом:

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

Ответ 5

Я тоже столкнулся с этой ошибкой. Я решил эту проблему, получив ссылки в обновленном хуке. Смотрите мой пример ниже.

В моем объекте данных у меня есть пустой массив с именем 'products'.

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

В обновленном хуке я проверяю, найдены ли ссылки. Если нет, то ничего не произойдет. Затем, когда найдены продукты, сценарий будет продолжен. В следующий раз, когда Vue снова попадет в обновленный хук, ваш скрипт больше не будет запускаться, потому что теперь длина массива products больше единицы (если, конечно, могут быть найдены какие-либо ссылки).

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

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