はじめに
最近、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
に設定すると実現できるようです。
便利。。
終わりに
他にも便利なオプションがあったので、上手く使っていきたいです!
今後も何か気づきがあれば記事を投稿していこうと思います!