Vue: specify non-dynamic true/false values for checkboxes

[jordanlev]

Some backends or APIs require true/false values from checkboxes to be provided in a certain way (e.g. "1" vs "0", or non-empty vs. empty string). It would be great if there were a way to specify the true and false values for a checkbox input. I see that there is a way to bind the value to a dynamic property, but I haven't found a way to set a non-dynamic value. Basically something like this:

 <input
  type="checkbox"
  v-model="toggle"
  v-true-value="1"
  v-false-value="0">

Thanks for your consideration.

[yyx990803]

You can just bind it to a literal as :true-value="1", it works as expected.

[jordanlev]

Okay, I was confused by 2 things: vue.js doesn't alter the values that get POSTed when the form is submitted, and the docs seem to indicate that this only works for binding to a data property name (not a literal value).

Is it okay if I attempt to modify the documentation to make it clearer that v-bind:true-value and v-bind:false-value works for both literals and property names? Also, I could mention that vue.js doesn't change what actually gets submitted (or serialized) with the form, but that an easy workaround is to add a hidden field before the checkbox like so:

<input type="hidden" name="my-checkbox" value="0">
<input type="checkbox" name="my-checkbox" value="1" v-bind:true-value="1" v-bind:false-value="0" v-model="the_data_property">

(I'm new to vue.js so I want to make sure I understand how it works properly before mucking around in your docs).

Thanks for the quick reply, and for the wonderful framework! I also have been listening to some of your recent podcast interviews and _really_ appreciate that you are actually familiar with other frameworks and can speak to the tradeoffs of each one instead of the usual "mine is the bestest and everything else sucks" schtick that so many other people seem to exhibit.

[Jossnaz]

this seems still an issue. Usually checkboxes dont send data when empty. Now serialized they send 0, so if we run for example a check that the checkbox is requred, it will pass as there is actually a value, even if 0

@jordanlev tbh I don't understand your workaround with the hidden input

[jordanlev]

@Jossnaz - are you seeing the "false value" being sent as part of the actual submitted form data from the browser, or do you mean it's in some json data you've serialized from the Vue component's data?

The workaround with the hidden input is for the opposite situation than you describe -- if you want the browser to send a "false value" in the form data when the checkbox is unchecked, then you can do that. (But you are not wanting the value to be sent, so you should not use that technique).

[carlonchosss]

use when you use a create
erase the stripes
-- --v-model="paramt.Estado_Empresa"
-- v-bind:true-value="1"
-- v-bind:false-value="0"
-- label="Habilitar Empresa"
-- />
---script--- so the box will always remain activated but if you remove the check automatically it happens to be 0usa when you use a
--data() {
-- return {
-- paramt: {
-- Estado_Empresa: 1
-- }
-- };

for the update use only this because in the array you get from the axios get automatically detect the checkbox
-- --v-model="paramt.Estado_Empresa"
-- v-bind:true-value="1"
-- v-bind:false-value="0"
-- label="Habilitar Empresa"
-- />