2

I Attempting to create a "v-checkbox" entry marked by default without using v-model directive.

In the official documentation for this Vuetify component I can't find the information on how to do this.

I tried to place this code but it doesn't work

<v-checkbox checked="true"></v-checkbox>
<v-checkbox  checked="checked"></v-checkbox>
<v-checkbox  checked></v-checkbox>
Jorge Gatica
  • 69
  • 3
  • 8

2 Answers2

7

One way to do this is by setting input-value="true", as described in the 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>
jkr
  • 17,119
  • 2
  • 42
  • 68
1

You might want to use :value="checked" where checked is a boolean variable. value is a one-way binding while v-model is a two-way binding. More information here:

v-bind:value (or :value) is called one way binding that means: you can change input value by changing bound data but you can't change bound data by changing input value through the element.

v-model is for two way bindings means: if you change input value, the bound data will be changed and vice versa.

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

<script>
  export default {
    data () {
      return {
        checked: true,
      }
    },
  }
</script>
Blackraspberryyy
  • 2,016
  • 2
  • 11
  • 22