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://vuejs.org/v2/guide/instance.html#Lifecycle-Diagram

您应该能够访问在mounted事件

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