Is there a way how define checked and unchecked value for .? Now VUE sets model to true/false which makes sense but in real apps data format is somethink like '1' => true and ''=>false. How to achive this in VUE?
If you wanted to submit a default value for the checkbox when it is unchecked, you could include an <input type="hidden"> inside the form with the same name and value , generated by JavaScript perhaps.
To watch for checkbox clicks in Vue. js, we can listen to the change event. to add the @change directive to the checkbox input to listen to the change event. Then we can get the checked value of the checkbox with e.
Once the checkbox is selected, we are calling prop() function as prop( "checked", true ) to check the checkbox and prop( "checked", false ) to uncheck the checkbox.
Vue Set Checkbox as Checked To do this, we need to bind the checkbox value with the v-model directive. This can be done by applying simple logic, and that is. Set the checkbox value to true, so if the value is truthy, then the initial state will be checked.
You can use true-value
and false-value
:
https://vuejs.org/v2/guide/forms.html#Checkbox-1
<input
type="checkbox"
v-model="toggle"
true-value="yes"
false-value="no"
>
// when checked:
vm.toggle === 'yes'
// when unchecked:
vm.toggle === 'no'
Not sure what it is exactly you need, but, as you say, if you do:
{{ boxtest }}
<input type="checkbox" v-model="boxtest"/>
Boxtest will display as 'true' or 'false' as you check or uncheck the box.
If you do need to convert it you could just do the likes of:
{{ boxtest ? 1 : '' }}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With