web-dev-qa-db-ja.com

Vuejsはコンポーネントからrefにアクセスできません

コンポーネントのテンプレート内にあるキャンバス要素を取得しようとしていますが、vuejs1の素晴らしいドキュメントが見つかりましたが、「ref」が要素を取得する唯一の方法であるvuejs2のドキュメントは見つかりませんでした。オブジェクトを取得していますが、変数にアクセスしようとすると未定義になります。

私の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要素を取得する必要があります。

here is console log

vue.jsvuejs2vue-component
26
Code Tree

createdは、テンプレートが処理される前に起動されます。
詳細はこちらをご覧ください： https://vuejs.org/v2/guide/instance.html#Lifecycle-Diagram

mountedイベントで$ refにアクセスできるはずです

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

$ nextTick（）関数を使用できます。DOMの更新後に$ nextTick（）内のコードが実行されます。

this.$nextTick(function () {

    console.log(this.$refs.ANY_COMPONENT_REF)

})
9
Kishan Madhesiya

私はまったく同じ問題を抱えていましたが、私の場合は、next-Tickでv-ifを変更するメソッドのrefにアクセスして解決しました。

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

場合によっては、次のように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
    }
  }
0
xianshenglu

私もこのエラーに遭遇しました。この問題を修正した方法は、更新されたフックでrefsを取得することでした。以下の例を参照してください。

データオブジェクトには、 'products'という空の配列があります。

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

更新されたフックで、refが見つかったかどうかを確認します。そうでなければ、何も起こりません。その後、製品が見つかると、スクリプトが続行されます。次回Vueは再び更新されたフックに入ります。製品配列の長さが1よりも大きいため（もちろん参照が見つかった場合）、スクリプトは再度トリガーされません。） 。

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

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