Vueのv-for向けにデータを加工した

前回のあらすじ

MySQLから読み取ったデータをVue.jsで展開しようとしましたが、
v-forとv-ifを組み合わせないと展開できない形のデータになっていて困っていました。
Vueではv-forとv-ifを組み合わせて使うことは推奨されていません。
https://techblog.jasmine-s.com/chanchanrk-20200819-302

データを頑張って加工した

VueのmountedイベントでAPIを呼んでデータを取得していますので、
その時点で取得したデータを加工してイイ感じのデータを作りました。

こんなデータを。

テーブルA.レコード1.id|テーブルA.レコード1.名称|テーブルB.レコード1.コード|テーブルB.レコード1.名称
テーブルA.レコード1.id|テーブルA.レコード1.名称|テーブルB.レコード2.コード|テーブルB.レコード2.名称
テーブルA.レコード2.id|テーブルA.レコード2.名称|テーブルB.レコード3.コード|テーブルB.レコード3.名称
テーブルA.レコード2.id|テーブルA.レコード2.名称|テーブルB.レコード4.コード|テーブルB.レコード4.名称

こんな風なJavaScirptオブジェクト配列に加工しなおしました。

[{
id = テーブルA.レコード1.id,
名称 = テーブルA.レコード1.名称,
[{コード = テーブルB.レコード1.コード,名称 = テーブルB.レコード1.名称},
{コード = テーブルB.レコード2.コード,名称 = テーブルB.レコード2.名称}]
},
{
id = テーブルA.レコード2.id,
名称 = テーブルA.レコード2.名称,
[{コード = テーブルB.レコード3.コード,名称 = テーブルB.レコード3.名称},
{コード = テーブルB.レコード4.コード,名称 = テーブルB.レコード4.名称}]
}]

これでVue.jsのv-forのみで表現ができるようになりました。
次回はこのデータ取得を定期的に行い、自動的にデータ部分のみを再描画するようにします。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

%d人のブロガーが「いいね」をつけました。