vue.js - Vuejs 无法从组件访问引用

Question

我正在尝试获取组件模板内的 canvas 元素，找到了 vuejs1 的优秀文档，但不是 vuejs2，其中“ref”是获取元素的唯一方法。虽然我正在获取对象，但是当我尝试访问该变量时，它是未定义的。

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 元素。

Answer 1

created 在处理模板之前触发。
您可以在此处找到更多详细信息:https://v2.vuejs.org/v2/guide/instance.html#Lifecycle-Diagram

您应该能够在 mounted 事件上访问 $refs

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