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