vue.js - 如何在 vuetify 复选框中设置不确定状态？

Question

我在 Vuetify 中有一个复选框，起初它有一个不确定的状态。将其更改为 true 或 false 后，我有一个按钮可以将其重置为默认值并再次显示不确定状态，但它不起作用。怎么了？indeterminate 的默认值为真，值为空。

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

按钮执行此操作：

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

方法：

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

标签： vue.jsvuetify.js

Answer 1

组件侦听更改并indeterminate在值更改为时将其设置false为状态true。因此，要实现这一点，您需要在复选框的 v-model 值更改时将indeterminate值设置为。false你可以通过听来做到这一点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