私は Vue を初めて使用するので、いくつかのことを試しています。私も Ionic を使用していますが、これも初めてです。独自のコンポーネント があり、API から返された各旅行インスタンスを表示したいと考えています。

<テンプレート> <イオンページ> <イオンコンテンツ:fullscreen="true"> <イオンヘッダー崩壊="凝縮">
      <イオンツールバー>
       ウォーディ - 旅行      

ドキュメントから理解したところによると、onMounted を使用してデータを設定できるようになりました。

<スクリプト セットアップ lang="ts"> 輸入 { イオンコンテンツ、 イオンヘッダー、 イオンページ、 イオンタイトル、 イオンツールバー、 "@ionic/vue" から; "./TripCard.vue" から TripCard をインポートします。 「axios」から axios をインポートします。 import { ref, onMounted } from "vue"; const トリップ = ref([]); onMounted(() => { axios.get("http://localhost:8081/woadie/trips").then((response) => { 旅行値 = 応答データ; }); }); 

現時点では、私の API は旅行インスタンスを含む配列を返します。ただし、 コンポーネントは複数回表示されます。その理由は何でしょうか?

ドキュメントで次のコード スニペットを見つけました。

       <スクリプトのセットアップ>
        'vue' からインポート { ref, onMounted } const リスト = ref([ /* ... */ ]) const itemRefs = ref([]) onMounted(() => console.log(itemRefs.value)) 
        <テンプレート>
         

          
 {{ アイテム }} 
 
 

私の実装とドキュメントの違いは、 itemRefs を直接使用する代わりに const list = ref([]) と