ループをv-forX 回 (例: 10 回) 繰り返すにはどうすればよいですか?
<!-- want to repeat this (e.g.) 10 times -->
<ul>
<li v-for="item in shoppingItems">
{{ item.name }} - {{ item.price }}
</li>
</ul>
ドキュメントには次のように記載されています:
<ul>
<li v-for="item in 10">{{ item }}</li>
</ul>
<!-- or -->
<li v-for="n in 10">{{ n }} </li>
<!-- this doesn't work -->
<li v-for="item in 10">{{ item.price }}</li>
しかし、Vue はオブジェクトのソースをどこから知るのでしょうか? ドキュメントに記載されているようにレンダリングすると、アイテムの数と項目は取得されますが、コンテンツは取得されません。
ベストアンサー1
範囲内のインデックスを使用し、そのインデックスを介して配列にアクセスできます。
<ul>
<li v-for="index in 10" :key="index">
{{ shoppingItems[index].name }} - {{ shoppingItems[index].price }}
</li>
</ul>
これは 1 から始まるインデックスであることに注意してください。最初の反復では はindex1 で、2 番目の反復でindexは は 2 になります。
詳細については、公式ドキュメントも確認してください。