Vue 3: v-for は項目よりも多くのコンポーネントを表示します
<p>私は Vue を初めて使用するので、いくつかのことを試しています。私も Ionic を使用していますが、これも初めてです。独自のコンポーネント <trip.card> があり、API から返された各旅行インスタンスを表示したいと考えています。 </p>
<pre class="brush:php;toolbar:false;"><テンプレート>
<イオンページ>
<イオンコンテンツ:fullscreen="true">
<イオンヘッダー崩壊="凝縮">
<イオンツールバー>
<ion-title size="large">ウォーディ - 旅行</ion-title>
</イオンツールバー>
</イオンヘッダー>
<trip-card v-for="旅行中の旅行" ref="旅行" :tripName="trip.name" />
</イオンコンテンツ>
</イオンページ>
</template></pre>
<p>ドキュメントから理解したところによると、onMounted を使用してデータを設定できるようになりました。 </p>
<pre class="brush:php;toolbar:false;"><スクリプト セットアップ 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) => {
旅行値 = 応答データ;
});
});
</script></pre>
<p>現時点では、私の API は旅行インスタンスを含む配列を返します。ただし、<trip-card> コンポーネントは複数回表示されます。その理由は何でしょうか? </p><p>ドキュメントで次のコード スニペットを見つけました。 </p>
<pre class="brush:php;toolbar:false;"><スクリプトのセットアップ>
'vue' からインポート { ref, onMounted }
const リスト = ref([
/* ... */
])
const itemRefs = ref([])
onMounted(() => console.log(itemRefs.value))
</スクリプト>
<テンプレート>
<li v-for="リスト内の項目" ref="項目参照">
{{ アイテム }}
</li>
</ul>
</template></pre>
<p>私の実装とドキュメントの違いは、 itemRefs を直接使用する代わりに const list = ref([]) と <li v-for="item in list" ref="itemRefs"> であるようです。なぜこの余分な手順を行うのでしょうか?この追加のステップは何をするのでしょうか?ドキュメントには説明がなく、なぜこれが必要なのかわかりません。 </p>
