Указание истинных / ложных значений для V-флажка Vuetify

Question

Я использую компонент Vuetify Vue.js v-checkbox.

Я хочу указать конкретные значения для истинных / ложных состояний флажка.

Глядя на документацию , я могу сделать это с помощью реквизита true-value & false-value.

<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>

Однако при использовании приведенного выше примера значение 1 не отправляется, если флажок установлен. Флажок отправляет 0 независимо от того, установлен флажок или нет.

Что мне нужно сделать, чтобы правильно установить true-value на 1?

Answer 1

Вы должны использовать директиву v-model вместо input-value реквизит:

<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>

отметьте это code example