やりたいこと
ページ内のDBと連携している箇所だけを定期的に再読込したいです。
Vue.jsを使う
今はejsを使っていますが、
ejsだとクライアント側で再描画が聞かないのでJavaScirptを使う必要があります。Vue.jsを使ってやってみます。
問題点：データ構造がよろしくなかった
テーブルを2つJOINして読み込んでいます。
2つのテーブルをテーブルA、テーブルBとしまして、
テーブルAとテーブルBが一対多で、
テーブルAの情報が繰り返し現れるようになっています。
テーブル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.名称
画面表示上はこのようにテーブルAの情報はテーブルAのレコードの情報は集約して表示しています。
[テーブルAのレコード1の名称][テーブルBのレコード1のコード:名称][テーブルBのレコード2のコード:名称]
[テーブルAのレコード2の名称][テーブルBのレコード3のコード:名称][テーブルBのレコード4のコード:名称]
これをVue.jsで処理しようとしたのですが、
v-forの中でv-ifを書かなければ処理を書くことができず、
Vueではv-forとv-ifを同時に使うのは良くないそうです。
https://jp.vuejs.org/v2/guide/conditional.html#v-if-%E3%81%A8-v-for
v-forとv-ifを同時に使わなくても済むように、データの構造を見直さなければならないと分かったのですが、データの組み換えをするロジックまでは作れませんでした。