2019.10.17
Vueでカクテルデータベースをリファインする話#13【VueでのFormとLaravel連携】
もうあんま日記に書くことがないと思ってたんですが、よくわからなかったので書きます。
苦労しましたがフォームの移植は完成大方完成しました。読み込みボタンが未実装なのですが、これに関してはどうにでもなりそうなので後回しです。オブジェクトの仕様に変更の可能性がなくなったら実装すればいいと思いますし。
ちなみに、移植だけだとアレなので、リファインもするのでこういう機能を追加しました。僕がかねてより欲しいなと思ってた機能ですね。これもついでに実装しようかなって思います。
とはいえ実装方法はめちゃくちゃ簡単で、DBのカクテルテーブルに1つカラムを追加するだけで実装できます。レシピの数をレコードに持たせる実装ですね。
最初は検索時に計算させようと思ってたんですけど、どう考えても重いのでデータ挿入時に計算して付与することにしました。ってか、これbooleanにしたらいいんじゃないのか･･････？でも拡張性に乏しいしなあ･･････データ別々に持たせようかな。
･･････ということで、宅飲みに使える範囲の簡単なレシピのみを抽出する検索メソッドを追加します。お楽しみに(笑)
さて本題ですね。フォーム検索ですね。これに関しては名前から検索で解決済みだと思ってたんですが、これはvuexのデータを読み込んで表示する、っていう仕様にしちゃってます。これが適切なのかはわからないんですけどね。
今回はそうではなく、普通に毎回サーバーに問い合わせをして、その結果を受け取ってレンダリング、っていうのをやろうかなと思います。ルーティングも変えます。
いまいち実装が浮かんでこないんですよね。@clickでイベントを発火させ、axiosで結果を受け取ったらページジャンプ、とかになるんですかね･･････？
ちょっといろいろ調べ物が必要になってきたので日記書くのが遅れましたが、まずフォームですね。
ここで考えなくてはならないのはバリデーションですね。
といってもフォーム自体はそんなにややこしくないのでバリデーションもラクですね。ここ数日Vee-Validateっていうのの導入を試みてたんですが、ちょっとうまくいきそうにないのでこれはまた別の機会に試すことにします。
具体的にどううまく行かないのかっていうと、何故かVuetifyのチェックボックスが消える(CSSが読み込めてない？)という不祥事が発覚したってのと、なんか自分の欲しい機能･･････つまり、チェックボックスのグループのうち最低1つは選択されていること、っていうのを満たすrequiredルールは結局自分で定義しなくちゃいけないニオイがしてるので、最終的にはおとなしくVuetifyで実装することにしました。
自分でバリデーションルールを書く感じですね。ちょっとやだなあ･･････笑
一応、いろいろ探してみたところvalidatorjsってのがあるみたいなのでそれを活用する方向でいこうかな。有名なjsライブラリですね。使い方も簡単で、javascriptで完結してるのでバグフィクスもある程度やりやすそうなニオイしますね。
使い方としては、Vueと絡ませるサンプルがあまりないのであれなんですけど、computedで定義してリアクティブに監視させるのが良さそうです。
送信時のバリデーションは･･････computedの戻してくる値を参照するのか？？おん？？？？
<template>
//中略
<v-flex>
<div>
<div class="d-inline ml-2" v-for="method in this.methods">
<input v-model="checkedMethods" type="checkbox" :value="method.id">
<span>{{method.name}}</span>
</div>
</div>
<v-alert
v-if="validateObj.errors.first('method')"
dense
outlined
type="error"
>
{{validateObj.errors.first('method').replace( 'method', '製法' )}}
</v-alert>
</v-flex>
//中略
const Validator = require('validatorjs');
Validator.useLang('ja');
...
computed:{
//バリデーション定義
validateObj:function(){
let data = {
method:this.checkedMethods,
category:this.checkedCategories,
};
let rules = {
method: 'required',
category: 'required',
};
var v=new Validator(data, rules);
v.fails();//ここでバリデーションを実行しオブジェクトの状態を更新しているみたい
return v;
}
...
methods:{
exeSearch:function(){
//検索の実行
if(this.validateObj.fails()){alert("入力項目に誤りがあります");return}
//必要項目は揃っているので、検索開始
...
},
}
}
</template>
雰囲気はこんな感じですね。当たり前というかドキュメント見ればわかりますがnpm installをしましょーーーね(笑)
バリデーション定義がHTML側に委譲できないのがアレですが、わりと書きやすくていいと思います。
引っかかるポイントとしては、computed内で意味もなくfailsを発火させてますが、これをしないとバリデーション状況が更新されません。べつにpassesでも意味的には変わらないんですけど。
このへんを上手く扱えば、そんなごちゃごちゃメソッドを定義しなくてもいい感じに書けたつもりなのでまぁいいかな。バリデーション定義は外に出しても良かったんですけど、ここでしか使わないパラメータだし妥協しました(笑)
とりあえず後は細かいところをごにょごにょして、フォーム部分のロジックは完成です！メインカテゴリにチェックボックスを入れたらミドルカテゴリにもチェックを入れるとかそういう細かい動作や、バリデーションエラーがあったらボタンが押せないとかそういうのも実装したんですが、jQueryで全部実装するよりやっぱりアクティブに更新してくれるのでラクです･･････これ生javascriptで実装しようとすると吐き気がするだろうなぁっていう細かい動作も割とサクっと実装できてありがたみを感じてる･･････
いやだって、配列に値を入れるだけでチェック状況まで更新されるんですよ！いやぁほんとにラクちんである･･････。
とりあえずしばらくサーバーサイドの話になるので書くことがなくなったんでしばらくはプログラミングの話は封印･･････できるといいなあ()