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?

Vuetify documentation says the input-value prop is supposed to be The v-model bound value — McWayWeb
The problem is that you used input-value instead of :input-value (notice :). input-value property exists. — Traxo

Boussadjra Brahim Boussadjra Brahim · Accepted Answer · 2019-07-04T21:33:51

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

Specifying true/false values for a Vuetify v-checkbox

1 Answers