CODEWITHSUNDEEP
vue.jsvuetify.js
mohammad
mohammad

Reputation: 521

How to set indeterminate state in vuetify checkbox?

I have a checkbox in Vuetify and at first it has an indeterminate state. After I change it to true or false, I have a button to reset it to default and show the indeterminate state again but it doesnt work. What's wrong? the defalut value for indeterminate is true and value is null.

<v-checkbox
  :indeterminate="indeterminate"
  v-model="value"
></v-checkbox>

and the button does this:

<v-btn @click="setToDefault()"> set to default </v-btn>

method:

    setToDefault(){
      this.value = null
      this.indeterminate = true
     }

Upvotes: 0

Views: 2030

Answers (1)

Anees Hameed
Anees Hameed

Reputation: 6544

The component listen for the changes and sets itself to an indeterminate state when the value changes to false to true. So, to accomplish that you need to set the value indeterminate to false whenever the v-model value of the checkbox changes. You can do that by listening to value

<v-checkbox
  :indeterminate="indeterminate"
   v-model="value"
   label="My Checkbox"
></v-checkbox>
<v-btn @click="setToDefault()"> set to default </v-btn>

export default {
  data: {
    value: null,
    indeterminate: false
  },
  watch: {
     value(){
       this.indeterminate = false
     }
  },
  methods: {
    setToDefault(){
      // Also, below line should be removed.
      // this.value = false
      this.indeterminate = true
     }
  }
}

https://codepen.io/aaha/pen/NWGBMmZ?editors=1011

Upvotes: 2

Related Questions