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更新后运行。

    try {
        // load up the knowledge base
        KieServices ks = KieServices.Factory.get();
        KieContainer kContainer = ks.getKieClasspathContainer();
        KieSession kSession = kContainer.newKieSession("ksession-rules");
        ...
        ...
         }
    catch(Exception e) {
              e.printStackTrace(); }

Answer 3

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

Answer 4

我遇到了完全相同的问题，就我而言，我通过使用用nextTick更改v-if的方法访问ref来解决了这个问题。

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

Answer 5

在可能的情况下，我会像这样使用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 6

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

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

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

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

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

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

Answer 7

要指出vue实例对我有用的自变量，info source

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

Vuejs无法从组件访问引用

7 个答案: