Vuejs 无法从组件访问 refs答案

【问题标题】：Vuejs can't access refs from componentVuejs 无法从组件访问 refs
【发布时间】：2017-04-14 12:43:17
【问题描述】：

我正在尝试获取组件模板中的 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 元素。

【问题讨论】：

给画布一个 ID 并使用它：this.$el.querySelector('#elementID')
不绝对不是:)

标签： vue.js vuejs2 vue-component

【解决方案1】：

created 在模板处理之前被触发。
您可以在此处找到更多详细信息：https://vuejs.org/v2/guide/instance.html#Lifecycle-Diagram

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

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

【讨论】：

没错。不幸的是，如果您的ref位于v-for元素上，这仍然是个问题。当mountedhook 被触发时，DOM 无法准确访问此ref。对此有何建议？谢谢！
@BrownBe，仍然没有答案。这是issue
@BrownBe，看看我的回答，也许它可以解决你的问题。
为什么这个答案被标记为接受？ Computed 可以找到 refs
如果还是不行，试试this.nextTick()。

【解决方案2】：

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

this.$nextTick(function () {

    console.log(this.$refs.ANY_COMPONENT_REF)

})

【讨论】：

不，这与我在案例中描述的 OP 的问题不同。我在组件中有一些参考，在安装时我试图为参考设置动画，但它们显示为“未定义”。我在组件中没有 v-for 或 v-if 或任何其他会导致问题的阻止程序。
这确实有效，即使您仍然在挂载的钩子中遇到问题。试试： async mount() { await this.$nextTick(); console.log(this.$refs.myElement) }

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

@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。

【讨论】：

【解决方案5】：

我也遇到了这个错误。我解决这个问题的方法是在更新的钩子中获取 refs。请参阅下面的示例。

在我的数据对象中，我有一个名为“产品”的空数组。

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

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

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

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

【讨论】：

谢谢。这对我来说也解决了，也不需要上面的 $nextTick() 方法，它也有效。

【解决方案6】：

在可能的情况下，我使用 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
    }
  }

【讨论】：

【解决方案7】：

将 vue 实例指向 self 变量对我有用，info source

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

【讨论】：