Code Tree Code Tree - 1 year ago 310
Javascript Question

vuejs Can't access refs from component

I am trying to get the canvas element which is inside a template of a component, found great documentations for vuejs1 but not for vuejs2 where "ref" is the only way to get the element. I am getting the object though, but when I try to access the variable it is undefinded.

My html

<div id="app><template id="image-capture">
<div class="row" >
<canvas ref="icanvas" ></canvas>

My 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({

new Vue({

I need to get the icanvas element.


here is console log

Answer Source

The created is fired before the template is processed.
You can find more details here:

You should be able to access the $refs on the mounted event

mounted: function() {
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download