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?
