Input v-checkbox 默认勾选答案

【问题标题】：Input v-checkbox checked by defaultInput v-checkbox 默认勾选
【发布时间】：2021-01-26 08:49:57
【问题描述】：

我试图创建一个默认标记的“v-checkbox”条目不使用 v-model 指令。

在此 Vuetify 组件的官方文档中，我找不到有关如何执行此操作的信息。

我尝试放置此代码，但它不起作用

<v-checkbox checked="true"></v-checkbox>
<v-checkbox  checked="checked"></v-checkbox>
<v-checkbox  checked></v-checkbox>

【问题讨论】：

标签： vue.js vue-component vuetify.js

【解决方案1】：

一种方法是设置input-value="true"，如API docs 中所述。

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
})

<head>
  <link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
</head>

<div id="app">
  <v-app id="inspire">
    <v-checkbox label="Foo" input-value="1"></v-checkbox>
  </v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>

【讨论】：

【解决方案2】：

您可能想要使用:value="checked"，其中checked 是一个布尔变量。 value 是一种单向绑定，而v-model 是一种双向绑定。更多信息here：

v-bind:value (or :value) 被称为单向绑定，这意味着：您可以通过更改绑定数据来更改输入值，但您不能通过更改输入值来更改绑定数据元素。

v-model是两种方式的绑定方式：如果你改变输入值，绑定的数据也会改变，反之亦然。

<template>
  ...
  <v-checkbox :value="checked"/>
</template>

<script>
  export default {
    data () {
      return {
        checked: true,
      }
    },
  }
</script>

【讨论】：