【Vue.js】Vueを使ってデータ数に応じたテーブルを描画しよう！【v-for】

みなさんこんにちは、現役エンジニアのサメハックです

アパレル企業でトップ販売員を経て
未経験からWebエンジニアに転職し、
現在正社員として5年働いています！

Vue.jsの解説シリーズです。

今回は配列データを使ってテーブルを描画する方法について学んでいきましょう！

駆け出しエンジニアや未経験の方、
また新入社員を指導する先輩社員にとっても
わかりやすいように解説していきます！

完成形のHTMLを見てみよう！

完成形はこのようなものになります。

See the Pen テーブルの作り方 by samehack (@samehack) on CodePen.

このようにHTMLのみで書くとデータ数に応じたセルの作成ができないので
非常に使いにくいものとなります。

今回はこれを簡単にVue.jsで記述していきましょう。

テーブル自体について復習したい方はこちら！

【HTML】テーブルの作り方【セルの結合も！】

samehack.com

Vue.jsでテーブルを作成しよう

Vue.jsでテーブルを作成するには
配列データを用いてループ処理を行う必要があるので
v-forを用いて要素を複数作成していきます。

v-forとは

v-forとは配列の子要素数の分だけ
HTMLの要素を繰り返し作成する構文です。

<div v-for="変数 in 配列名"></div>

詳しく知りたい方はこちらをご参照ください

【Vue.js】ループ処理をつくろう！【Vue 3】

この記事を読むと・・・ Vue.jsを使ったループ処理の書き方が理解できる

samehack.com

HTMLをVue.jsに置き換えよう！

ここではHTMLにベタ書きしたテーブルのデータ表示部分をVue.jsに置き換えます。

See the Pen Vue_テーブル by samehack (@samehack) on CodePen.

このように記述することで配列userListの子要素数に応じたデータが表示されます。

対象範囲はここです。

<tr>
  <td>A001</td>
  <td>サメハック</td>
  <td>29</td>
</tr>
<tr>
  <td>A002</td>
  <td>ねこハック</td>
  <td>31</td>
</tr>
<tr>
  <td>A003</td>
  <td>いぬハック</td>
  <td>40</td>
</tr>

↓ これに置き換わる

<tr v-for="user in userList">
  <td>{{user.id}}</td>
  <td>{{user.name}}</td>
  <td>{{user.age}}</td>
</tr>

解説

今回行ったことを簡単に解説すると
行を表すtr要素をuserListの子要素分複製し、
td要素にに各keyに応じたvalueを表示しています。

まとめ

満足いただけたら、1クリックなのでSNSフォローしてもらえると嬉しいです🦈

twitter
instagram