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 事件的 $refs

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

Answer 2

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

this.$nextTick(function () {

    console.log(this.$refs.ANY_COMPONENT_REF)

})

Answer 3

我遇到了完全相同的问题，在我的情况下，我通过访问使用 nextTick 更改 v-if 的方法中的 ref 解决了这个问题。

methods: {
open() {
  this.show = true; //v-if condition
    this.$nextTick(function() {
      this.titleWidth = this.$refs.titleBg.clientWidth - 30;
    });
}

Answer 4

在可能的情况下，我使用 v-for 比如：

<li class="list__item" v-for="(item,index) in pubList" :key="index">
   <img
      class="list__img lazy_image"
      ref="lazyImages"
    >
</li>

和

 //pubList is from ajax
 props: ['pubList'],

在这种情况下，我通过以下方式解决：

  watch: {
    'pubList': {
        handler:function(newArray) {
             if(newArray.length===0){
                return
              }
             this.$nextTick(function() {
               console.log(this.$refs.lazyImages)
             })
          },
       immediate:true
    }
  }

Answer 5

我也运行陷入这个错误。我解决此问题的方法是在更新的挂钩中获取 refs。请参阅下面的示例。

在我的数据对象中，我有一个名为 'products' 的空数组。

data() {
    return {
        products: []
    }
}

在更新的挂钩中，我检查是否找到任何引用。如果没有，那么什么也不会发生。然后当找到产品时，脚本将继续。下次 Vue 再次进入更新的钩子时，您的脚本将不会再次被触发，因为现在产品数组的长度大于 1（当然如果可以找到任何引用）。

updated() {
    let products = this.$refs.products;
    if (!products || this.products.length > 0) return;

    this.products = products;
    // run your logic here
}

Answer 6

将 vue 实例指向自身变量对我有用，

created() {
    let self = this;
    console.log(self.$refs.icanvas);
},

Answer 7

@Dan Levin 的回答有效。

methods: {
fecthData() {
    this.data ={ ... }; // assume the fetched data have changed DOM here.

    this.$nextTick(() => {
      console.log(this.$refs); // returns obj
      console.log(this.$refs.target); // returns el
    });
}

这也适用于 v-for。

Vuejs 无法从组件访问引用

Vuejs can't access refs from component

vue.js

vue-component

vuejs2

HTML

JS