Установка начального значения флажка Vuetify

Question

У меня есть приложение Vue JS, которое использует флажок Vuetify.Я не могу установить начальное значение на флажок.

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

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

Answer 2

Попробуйте удалить false-value и true-value и, используя false или true, указать, нужно ли его проверять в value.