CODEWITHSUNDEEP
javascriptvue.jsvuejs2vue-componentvuetify.js
VerySeriousSoftwareEndeavours
VerySeriousSoftwareEndeavours

Reputation: 1753

Specifying true/false values for a Vuetify v-checkbox

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?

Upvotes: 5

Views: 18237

Answers (1)

Boussadjra Brahim
Boussadjra Brahim

Reputation: 1

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

Upvotes: 0

Related Questions