Specifying true/false values for a Vuetify v-checkbox

Question

I am using the Vuetify component v-checkbox.

I want to specify specific values for the true/false states of the checkbox.

Looking at the documentation it looks like I can do this using the true-value & false-value props.

<v-checkbox
    v-else-if="input.type == 'checkbox'"
    false-value="0"
    true-value="1"
    input-value="input.val"
    :error-messages="form.errors[field]"
>
    <template #label>@{{ input.hint }}</template>
</v-checkbox>

However using the example above does not submit a value of 1 when the checkbox is checked. The checkbox submits 0 regardless of whether the checkbox is checked or not.

What do I need to do to properly set the true-value to 1?

Solution

You should use v-model directive instead of input-value prop like :

<v-checkbox
     v-else-if="input.type == 'checkbox'"
     false-value="0"
      true-value="1"
     v-model="input.val"
    :error-messages="form.errors[field]"
                            >
    <template #label>@{{ input.hint }}</template>
</v-checkbox>

check this code example

Comments

[VerySeriousSoftwareEndeavours]

After I made this change I am not able to set the initial value of the checkbox anymore. I expect that if "input.val" is '1', then the checkbox would start off checked. Why does 'input.val' not check the box?

[VerySeriousSoftwareEndeavours]

Yes. This fixes the true/false values of the checkbox. i.e. It submits 1 when checked, 0 when unchecked. However this only works when the box starts off unchecked. If 'input.val' is already equal to '1' when the component renders it does not start the checkbox off checked...