Diary

Vuetify2+Vue.js2でINPUTフォームを作成した日記

すでに世の中Vue3なんですがVuetify2とVue2でINPUTフォームを作成することになりまして、簡単な動作まで作成できましたというのが先週でした。

日付やチェックボックスなどの選択ができるフォームなのですが、今回はこの入力内容を複数DBに保存するというのを想定しています。

例えば希望商品、配達希望日みたいな入力内容をそのまんま保存しておく、但し複数件という感じでイメージしてください(実際の業務の話なので本当は違う内容を入力するフォームを作成しましたが内容をボカす必要があるので)。

計画としてはフォームの内容を拾ってJSON化、これをDB列に保存するというものです。

このDB保存を非同期で行う部分はまだ実装していません、軽く動く程度のモックアップを作成するのが目的だからです。

DBに保存された内容はリスト表示されリストは各行全てチェックボックスになっており、選択すると対応したJSONを読み込んで画面に再現するというものです。

data: に入力内容を保管しておくわけですが再現する場合も同項目にJSONをデコードして展開する必要があります。

そこで他の方が実装されている既存画面とはちょっと違うDATA定義をしてみました。

 

おすすめ