現在、VueをメインのJSフレームワークに変えてから１年以上が経ちましたけど、これまでほぼ不便な状況も発生せず、いつも開発の効率化に貢献してもらってます。
さすがに保守が難しくなりすぎてしまうのでSPA化は考えてないんですけど、Vueのおかげでロジックをサーバーからクライアント側に移動させることも多くなってきました。
ということで、今回はVueの話題なんですけど、状況としては「VueとAjaxを使ってデータ送信する」という機能を実装する場合に、少しとまどった部分があったので、それをまとめておきたいと思います。
何が問題なのか
どんなことかというと、ずばり
Vueで「v-model」を設定したチェックボックスの値が設定できない
というものでした。
例えば、Vueで基本的なテキスト入力をバインディングする場合、以下のようになると思います。
（HTML）
<input type="text" v-model="value">
（JS）
new Vue({
el: '#app',
data: {
value: 'xxx'
}
});
で、この流れでチェックボックスも同じく以下のように設定したとします。
（HTML）
<input type="checkbox" v-model="value">
（JS）
new Vue({
el: '#app',
data: {
value: false
}
});
もちろん、これで問題なくチェックボックスがチェックされてるかどうかによって、「true」と「false」が切り替わってくれます。さすがVue。とてもシンプルにこれだけの機能を実装できます。
ただ、これだとちょっと問題というか、気になることが発生しました。それは、
このままだと、Ajaxでパラメータを送信した場合、true／falseがテキストとして送信されてしまう
のです。
つまり、受信側のPHPでは、
if($_POST['value'] == 'true') {
// 何か
}
というように、「true／false」をテキスト化したコードを書くことになってしまいます。
んー、別にこれでいいっちゃいいんですけど、パッと見すると「うわ、間違えてんじゃん・・・」と思っちゃうので、今後コードを改善するときに何も考えずにtrue部分を取り除いてしまう可能性がでてきます。だから、できれば「yes／no」とかに変更したいわけですね。
なによりプログラマーとして何か居心地が悪いですし（笑）
※ちなみに通常のHTMLフォームだとチェックボックスはチェックが入っていないと、データ送信すらされない。でも、Vueの場合はtrue／falseに変換してくれます
チェックボックスに値を設定する
では、Vueでチェックボックスに値を設定する場合はどうすればいいのか。
まず最初に思いついたのが、dataに「yes」を登録する方法です。
予想としては、チェックボックスの切り替えと同時に「yes」と空白が切り替わるのかな？と思ったんですね。
（HTML）
<input type="checkbox" v-model="value">
（JS）
new Vue({
el: '#app',
data: {
value: 'yes' // このコードはうまくいきません
}
});
でも、このコードはうまくいきません。
最初こそ「yes」の値になりますけど、一回でもチェックされると元の「true/false」にもどってしまうんですね。
うーん、どうしたものかと、Vueのドキュメントを読んでいるとチェックボックスの項目にこんなものを発見しました。
<input
type="checkbox"
v-model="toggle"
true-value="yes"
false-value="no"
>
ん？？
- true-value
- false-value
おおっ、そんな便利な書き方があったのか！
つまり、さっきの例で言うと
（HTML）
<input type="checkbox" true-value="yes" false-value="no" v-model="value">
（JS）
new Vue({
el: '#app',
data: {
value: 'yes'
}
});
とすれば、「value」の中身は「yes/no」で固定されるので、PHPでも
if($_POST['value'] == 'yes') {
// 何か
}
でチェックの有無で分岐することができるというわけですね。
やっぱりVueは使いやすいです♪
※注意すべき点としては、もしAjaxじゃなくHTMLのフォームでデータ送信するときは「yes/no」は関係なく、通常の「データの有無」でチェックを判別する必要があります。
ちなみに
Laravelに「accepted」という、「利用規約に同意する」チェックボスに使われるバリデーション・ルールがあるんですけど、これは該当データが
- yes
- on
- 1
- true
のどれかだとOKになるんで、今回のように「yes／no」の値で問題なく対応できるようです。
Laravelもさすがですね。
ということで、今回はVueのチェックボックスとv-modelについてまとめてみました。
お役に立てたら光栄です。
ではでは〜。
開発のご依頼お待ちしております 😊✨
開発効率を上げるための機材・まとめ
