javascript - Specifying truefalse values for a Vuetify v-checkbox - Stack Overflow

admin管理员组

文章数量:1404927

I am using the Vuetify ponent 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?

I am using the Vuetify ponent 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?

• javascript
• vue.js
• vuejs2
• vue-ponent
• vuetify.js

Share Improve this question Follow edited May 6, 2020 at 5:36 Boussadjra Brahim 1 asked Jul 4, 2019 at 21:22 VerySeriousSoftwareEndeavoursVerySeriousSoftwareEndeavours 1,75344 gold badges3333 silver badges6464 bronze badges 2

• Vuetify documentation says the input-value prop is supposed to be The v-model bound value – VerySeriousSoftwareEndeavours Commented Jul 4, 2019 at 22:14
• 1 The problem is that you used input-value instead of :input-value (notice :). input-value property exists. – Traxo Commented Jul 5, 2019 at 6:49

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 0

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

本文标签： javascriptSpecifying truefalse values for a Vuetify vcheckboxStack Overflow