前回のあらすじ
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のみで表現ができるようになりました。
次回はこのデータ取得を定期的に行い、自動的にデータ部分のみを再描画するようにします。