CODEWITHSUNDEEP
vue.jsvuetify.js
flyingL123
flyingL123

Reputation: 8076

Why won't this vuetify checkbox show as checked or unchecked based on a boolean value?

I'm not sure if this is a bug with vuetify, or maybe I am not understanding something basic about Vue. I am trying to set a vuetify checkbox's value using it's :value prop. I'm not using v-model because I don't need two-way binding. I just want it's checked state to be set based on a boolean within my component.

The boolean value is calculated in a computed, but when the value changes, the checkbox doesn't respond. Here's a codepen:

https://codepen.io/flyingl123/pen/PoPKYYX

I am expecting to see the checkbox checked on pageload, but it's not:

<div id="app">
  <v-app id="inspire">
    <div>
      <v-row justify="space-around">
        <v-checkbox :value="boolValue" class="mx-2" label="Checkbox"></v-checkbox>
      </v-row>
    </div>
  </v-app>
</div>

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({}),
  computed: {
    boolValue() {
      return true;
    }
  }
})

If I inspect the checkbox component in Vue dev tools, I see the value prop has the correct true setting, but the box isn't checked.

In my real application, when the boolValue changes, I do see the checkbox getting the correct prop value, but still the box does not become checked or unchecked. Why is this?

Upvotes: 9

Views: 9966

Answers (3)

sebix
sebix

Reputation: 49

The answer by flyingL123 already states that the prop input-value works for v-checkbox.

I would like to add some information:

All Vuetify form input components have the prop value but two components don't use it for model binding (v-checkbox + v-switch). This leads to confusion, especially when the value prop still exists, also in the api documentation:

v-textfield and nearly all other inputs:

value               The input’s value

v-checkbox/v-switch:

input-value     The v-model bound value
[...]
value               The input’s value

It is very easy to miss input-value in the middle of other props. I think there might be a reason why these boolean inputs use input-value. It's a pity that this isn't really made clear in the docs.

Upvotes: 2

flyingL123
flyingL123

Reputation: 8076

Apparently the vuetify checkbox uses prop input-value, not value:

https://github.com/vuetifyjs/vuetify/issues/11119#issuecomment-614420583

Upvotes: 24

Anees Hameed
Anees Hameed

Reputation: 6544

You need to Replace :value with v-model

<div id="app">
  <v-app id="inspire">
    <div>
      <v-row justify="space-around">
        <v-checkbox v-model="boolValue" class="mx-2" label="Checkbox"></v-checkbox>
      </v-row>
    </div>
  </v-app>
</div>

Upvotes: -1

Related Questions