设置 Vuetify 复选框的初始值

Question

我有一个使用Vuetify复选框的Vue JS应用程序。我无法将初始值设置为已选中。

<v-checkbox
  v-else-if="input.type == 'checkbox'"
    false-value="0"
    true-value="1"
    v-model="input.val"
    :error-messages="form.errors[field]"
>

当 input.val 等于 1 时，我希望复选框一开始就被选中。然而，复选框不会一开始就被选中。

我还尝试添加了以下属性：

:value="input.val"
:input-value="input.val"

但是这些都不会影响复选框的起始状态。如果 input.val 的初始值为 1，那么为什么这个复选框不会被默认选中呢？

<v-checkbox
  v-else-if="input.type == 'checkbox'"
  false-value="0"
  true-value="1"
  :value="input.val"
  :input-value="input.val"
  v-model="input.val"
  :error-messages="form.errors[field]"
>
  <template #label>@{{ input.hint }}</template>
</v-checkbox>

- VerySeriousSoftwareEndeavours

Answer 1

如果你要在数字上使用绑定，你需要使用:或v-bind，如果你使用v-bind:true-value它会正常工作。 示例请参见codepen。

示例

<div id="app">
      <v-app id="inspire">
        <v-container fluid>
          <v-checkbox v-model="checkbox1"
                        v-bind:false-value="0"
                        v-bind:true-value="1"
                      :label="`Checkbox 1: ${checkbox1.toString()}`"></v-checkbox>
          <v-checkbox v-model="checkbox2" :label="`Checkbox 2: ${checkbox2.toString()}`"></v-checkbox>
        </v-container>
      </v-app>
    </div>

new Vue({
  el: '#app',
  data () {
    return {
      checkbox1: 1,
      checkbox2: 0
    }
  }
})

- Sabee

---

不确定为什么您认为Vuetify中存在错误，它只需要类型匹配即可。如果没有使用v-bind，则true-value和false-value将被视为字符串，并且与数据中的数字不相等。 - skirtle

是的，但如果您在不绑定的情况下使用true-value和false-value，则不会更新v-checkbox输入值，而不是v-model值。 v-model值已更新，但输入值未更新。 - Sabee

我不太确定你的意思。如果你在没有使用v-bind的情况下使用true-value和false-value，那么这些值将只是字符串，因此你还需要在数据中将初始值设置为字符串，例如checkbox1: '1'。只要所有内容都使用相同的类型，就可以正常工作。 - skirtle

抱歉我的表述不准确。是的，你说得对，但是如果没有绑定，它就是字符串。对于数组和对象，你需要使用绑定。 - Sabee

这在Vuetify 3中也适用。我正在使用MySQL，它发送一个1或0。 - A.W.

Answer 2

尝试移除false-value和true-value，并使用false或true来告诉它是否应该在value中进行检查。

- naffetS

---

有false-value和true-value属性。请参阅文档：https://vuetifyjs.com/en/components/selection-controls - VerySeriousSoftwareEndeavours

我查看了文档，但是在常规版本或下一个版本中都没有找到任何属性。 - naffetS

我猜测你在访问链接后没有从下拉菜单中选择“v-checkbox”。所有的选择控件都列在那个链接上，而最初显示的属性是针对v-radio-group的。 - VerySeriousSoftwareEndeavours