はじめに
最近、Rails+Vue.jsの組み合わせで使う必要があり、備忘録的につまったところを残していこうと思います。
今回はタイトルにもある通り、チェックされているときとチェックされていないときにそれぞれ値を送る方法についてまとめました。
もっと良い感じに書けるなどありましたら、コメントいただけると嬉しいです。。
実装してみる
erbの場合
erbの場合、下記で実現できます。
<%= f.check_box :is_mon_monthly_contract, {checked: child_fee.plan.is_mon_monthly_contract_target?}, :target, :non_target %>
これでチェックされている場合はtarget、チェックされていない場合はnon_targetが送られます。
ちなみにinput要素のチェックボックス自体にチェックされていない場合の値を指定する方法はないようです。
でも、erbでは実現できているじゃないか。。と思い調べてみたところhiddenを使用することで実現しているようです。
Railsでオフの状態のcheck_boxの値が送信される仕組み
上記のコードから下記のようなhtmlが展開されます。
<input name="child_fee[plan_attributes][is_mon_monthly_contract]" type="hidden" value="non_target" />
<input type="checkbox" value="target" checked="checked" name="child_fee[plan_attributes][is_mon_monthly_contract]" id="child_fee_plan_attributes_is_mon_monthly_contract" />
<label for="child_fee_plan_attributes_is_mon_monthly_contract">月</label>
よく見ると、チェックボックスとnameが同じhidden要素があり、valueにはnon_targetとあります。
そのため、チェックされているときとチェックされていないときの処理は下記のようになります。
チェックされていない場合
hiddenで設定されているnon_targetが送られる
チェックされている場合
hiddenで設定されている値を上書きしてチェックボックスに設定されているtargetが送られる。
vue.jsの場合
これをvue.jsでやる場合は下記になります。
<input v-model='child_fee.plan_attributes.is_mon_monthly_contract' id='is_mon_monthly_contract' type='checkbox' true-value='target' false-value='non_target'>
<label for="is_mon_monthly_contract">月</label>
公式のドキュメントによると、チェックされているときの値をtrue-valueに、チェックされていないときの値をfalse-valueに設定すると実現できるようです。
便利。。
終わりに
他にも便利なオプションがあったので、上手く使っていきたいです！
今後も何か気づきがあれば記事を投稿していこうと思います！