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

【问题标题】：How to set indeterminate state in vuetify checkbox?如何在 vuetify 复选框中设置不确定状态？
【发布时间】：2020-06-07 09:17:32
【问题描述】：

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

<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.js vuetify.js

【解决方案1】：

当值从false 更改为true 时，组件侦听更改并将自己设置为indeterminate 状态。因此，要实现这一点，您需要将值 indeterminate 设置为 false，只要复选框的 v-model 值发生更改。你可以通过收听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

【讨论】：