CODEWITHSUNDEEP
vue.jsvue-componentvuetify.js
Jorge Gatica
Jorge Gatica

Reputation: 109

Input v-checkbox checked by default

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>

Upvotes: 4

Views: 9439

Answers (2)

jkr
jkr

Reputation: 19250

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/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>

Upvotes: 9

Blackraspberryyy
Blackraspberryyy

Reputation: 2134

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>

Upvotes: 1

Related Questions