设置 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，为什么此框不开始选中？

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

Answer 1

您需要使用:orv-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
    }
  }
})