Vuejs 无法从组件访问 refs [英] Vuejs can't access refs from component
问题描述
我正在尝试获取组件模板内的画布元素,找到了适用于 vuejs1 的出色文档,但没有找到适用于ref"的 vuejs2 文档.是获取元素的唯一方法.虽然我正在获取对象,但是当我尝试访问该变量时,它是未定义的.
HTML
</模板>
JS
常量 ic = {模板: '#image-capture' ,创建(){console.log(this.$refs);//这个返回对象console.log(this.$refs.icanvas);//但这是未定义的}}const 路由 = [{路径:'/ic',组件:ic},]const 路由器 = 新的 VueRouter({路线})新的 Vue({路由器,}).$mount('#app')
我需要获取 icanvas 元素.
created
在处理模板之前被触发.
您可以在此处找到更多详细信息:https://vuejs.org/v2/guide/instance.html#Lifecycle-Diagram
您应该能够在 mounted
事件中访问 $refs
挂载:function() {console.log(this.$refs.icanvas);},
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 undefined.
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')
I need to get the icanvas element.
The created
is fired before the template is processed.
You can find more details here: https://vuejs.org/v2/guide/instance.html#Lifecycle-Diagram
You should be able to access the $refs on the mounted
event
mounted: function() {
console.log(this.$refs.icanvas);
},
这篇关于Vuejs 无法从组件访问 refs的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!