javascript - 为 Vuetify v-checkbox 指定真/假值

Question

我正在使用 Vuetify 组件 v-checkbox。

我想为复选框的真/假状态指定特定值。

查看 documentation看起来我可以使用 true-value 和 false-value Prop 来做到这一点。

<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