コンポーネントからの参照にVuejsがアクセスできない

Question

コンポーネントのテンプレート内にあるキャンバス要素を取得しようとしていますが、vuejs1ではすばらしいドキュメントが見つかりましたが、要素を取得する唯一の方法は「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

あなたはこのキャンバスにIDを付けmountedイベント

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