v-forディレクティブで配列データをインデックスと合わせて表示する方法についてサンプルコードと合わせて紹介します。
v-forディレクティブで配列データをインデックスと合わせて表示する
<html>
<head>
<script src=”https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js” ></script>
</head><body>
<div id=”app”>
<p v-for=”(value, index) in list”>{{ index+1 }}{{ value.text }}
</p>
</div>
</body></html>
<script>
var app = new Vue({
el: ‘#app’,
data: {
list: [
{ text: ‘リスト1’ },
{ text: ‘リスト2’ },
{ text: ‘リスト3’ }
]
}
})
</script>
まずは、Vueインスタンス内で下記のように連想配列で、キー：値の配列データをVueインスタンスのdataに作ります。
data: {
list: [
{ text: 'Learn JavaScript' },
{ text: 'Learn Vue' },
{ text: 'Build something awesome' }
]
}
そして、html側では、htmlタグの属性にv-forを追加して、「v-for=(要素, index) in 配列」でループ処理します。その後、{{ index+1 }} {{ 要素(キー).値 }}で、データとインデックスを1つずつ表示しています。
ちなみにJSはインデックスが0から始まるので+1としています。
参照：https://johobase.com/vue-js-v-for-directive/
コメント
[…] 関連記事：【VueJS】v-forディレクティブで配列データをインデックスと合わせてテーブルで表示する […]