非同期呼び出しでコンポーネントの参照を取得する

Question

非同期呼び出しが発生するまで作成されない項目のリストがあります。私は、作成されたアイテムの最初（または任意）のgetBoundingClientRect（）を取得する必要があります。

は、例えば、このコードを取る：

<template> 
    <div v-if="loaded"> 
     <div ref="myItems"> 
      <div v-for="item in items"> 
       <div>{{ item.name }}</div> 
      </div> 
     </div> 
    </div> 
    <div v-else> 
     Loading... 
    </div> 
</template> 

<script> 
    import axios from 'axios'; 

    export default { 
     data() { 
      return { 
       items: [] 
      } 
     }, 
     created() { 
      axios.get('/url/with/some/data.json').then((response) => { 
       this.items = response.data; 
       this.loaded = true; 
      }, (error) => { 
       console.log('unable to load items'); 
      }); 
     }, 
     mounted() { 
      // $refs is empty here 
      console.log(this.$refs); 

      // this.$refs.myItems is undefined 
     } 
    }; 
</script> 

をだから、私はmounted()方法でmyItems REFにアクセスしようとしているが、this.$refsは、この時点で{}空です。したがって、watchというコンポーネントを使用して、さまざまな方法でrefの値を読み取ることができたのを確認しようとしましたが、失敗しました。

私を正しい方向に導くことができる人は誰ですか？

いつも、ありがとうございました！

UPDATES

追加mounted()方法でthis.$watchと$refsはまだ{}として戻ってきます。その後、updated()メソッドをコードに追加してから$refsにアクセスでき、動作するように見えました。しかし、これが正しい解決策であるかどうかは分かりません。

vuejsは通常、非同期データに基づいてdivを画面上の位置に動的に移動するような処理を行いますか？これは、私がやろうとしているのと似ています。一度レンダリングされると（非同期データに基づいてレンダリングされていなければならない場合）、要素を画面上で取得し、何かをするためにアクセスしますポジションに）？

Answer 1

マウント中にthis.$refs.myItemsを実行する代わりに、axiosの約束が応答を返した後で実行できます。

あなたもitemsとloadedを更新し、SOUあなたが時計を使用したい場合は、あなたがそれらの