Vue.jsのv-forディレクティブを使用して、配列から表(table)を作成する方法を紹介します。
今回はCSSフレームワーク Bootstrapのバージョン5.0.2を使用しています。
v-forで表を作成するサンプルコード
Vue.jsでは、v-forディレクティブを使用することで配列の要素を繰り返し描画することができます。
v-forディレクティブの使い方を知りたい方はこちらをご覧ください！
v-forを使用して表を作成するサンプルコードは次のようになります。
v-forを使うことで簡単に配列から表を作成できます！
<script lang="ts">
export default {
data() {
return {
items: [
{ name: "田中", age: 20, hometown: "東京" },
{ name: "鈴木", age: 25, hometown: "大阪" },
{ name: "佐藤", age: 30, hometown: "神奈川" },
],
};
},
};
</script>
<template>
<table class="table">
<thead>
<tr>
<th scope="col" />
<th scope="col">名前</th>
<th scope="col">年齢</th>
<th scope="col">出身地</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in items" :key="index">
<th scope="row">{{ index+1 }}</th>
<td>{{ item.name }}</td>
<td>{{ item.age }}</td>
<td>{{ item.hometown }}</td>
</tr>
</tbody>
</table>
</template>| 名前 | 年齢 | 出身地 | |
|---|---|---|---|
| 1 | 田中 | 20 | 東京 |
| 2 | 鈴木 | 25 | 大阪 |
| 3 | 佐藤 | 30 | 北海道 |
配列から表を作成する方法
v-forディレクティブを使用した表の作成方法を詳しく紹介していきます。
・v-forを使用しない表の作成方法
・表作成で使用するHTMLタグの意味
を知りたい方はこちらの記事を参考にしてください。
<script>タグ：TypeScriptコードの記述
<script>タグ内ではTypeScriptやJavaScriptで処理を書くことができます。
今回は、<script>タグ内に作成したい表の配列をdataオプションで定義していきます。
サンプルコードでは配列のオブジェクトのプロパティとして、name・age・hometownの３つを定義しています。
<script lang="ts">
export default {
data() {
return {
items: [
{ name: "田中", age: 20, hometown: "東京" },
{ name: "鈴木", age: 25, hometown: "大阪" },
{ name: "佐藤", age: 30, hometown: "神奈川" },
],
};
},
};
</script><template>タグ：HTMLコードの記述
次に<template>タグ内にHTMLを記述していきます。表を作成するには<table>タグを使用します。
<table></table>内の<thead></thead>部分には表の見出しの行を記述します。
<template>
<table class="table">
<thead>
<tr>
<th scope="col" />
<th scope="col">名前</th>
<th scope="col">年齢</th>
<th scope="col">出身地</th>
</tr>
</thead>
︙
</table>
</template>そして、<tbody></tbody>部分に表の本体部分の行を記述していきます。
ここで<script>タグ内で定義した「items」という配列を使用します。
<tr>タグで表の横一行を作成でき、<tr>でv-forディレクティブを使用することで<tr></tr>を一度記述するだけで「items」配列のすべての要素に対して行を生成することができます。
v-forディレクティブはJavaの拡張 for文と似ています。5行目にv-for="(item, index) in items"と記述すると、「items」配列を反復処理し「items」配列内のすべての要素に対して<tr>要素が生成されます。(item, index) in itemsの「item」には
繰り返しの1回目は { name: "田中", age: 20, hometown: "東京" }
繰り返しの2回目は { name: "鈴木", age: 25, hometown: "大阪" },
繰り返しの3回目は { name: "佐藤", age: 30, hometown: "神奈川" }
が入ります。
そして、<td></td>内でitem.nameのようにドットの後にオブジェクトのプロパティを指定することで、表のデータセルに配列の要素を表示することができます。(item, index) in itemsの “index” にはインデックス（繰り返し回数）が入ります。
2つ目に記述した変数（今回は “index” ）にインデックスが入ります。
<template>
<table class="table">
︙
<tbody>
<tr v-for="(item, index) in items" :key="index">
<th scope="row">{{ index+1 }}</th>
<td>{{ item.name }}</td>
<td>{{ item.age }}</td>
<td>{{ item.hometown }}</td>
</tr>
</tbody>
</table>
</template>まとめ
このような書き方で次のようなVue.jsのv-forディレクティブで配列から表(table)を作成することができます。
| 名前 | 年齢 | 出身地 | |
|---|---|---|---|
| 1 | 田中 | 20 | 東京 |
| 2 | 鈴木 | 25 | 大阪 |
| 3 | 佐藤 | 30 | 北海道 |
参考にしていただければ幸いです！
vue.jsで表を作成したい方は、こちらの記事もご覧ください！
コメント