Vuejs 无法从组件访问 refs

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')

我需要获取 icavas 元素。

原文由 Code Tree 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

created 在模板被处理之前被触发。

您可以在此处找到更多详细信息： https ://v2.vuejs.org/v2/guide/instance.html#Lifecycle-Diagram

您应该能够访问 mounted 事件中的 $refs

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

原文由 Mihai Vilcu 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

您可以使用 \(nextTick() 函数，\)nextTick() 中的代码将在 DOM 更新后运行。

 this.$nextTick(function () {

    console.log(this.$refs.ANY_COMPONENT_REF)

})

原文由 Kishan Madhesiya 发布，翻译遵循 CC BY-SA 4.0 许可协议