如何在 vuetify v-checkbox 中处理选中和不确定？答案

【问题标题】：How to handle checked and indeterminate in vuetify v-checkbox?如何在 vuetify v-checkbox 中处理选中和不确定？
【发布时间】：2019-10-11 15:12:50
【问题描述】：

我正在尝试在 vuetify v-checkbox 中切换选中和不确定状态。有时它会起作用，但大多数时候它不起作用。我究竟做错了什么？我想通过检查第二个复选框来设置第一个复选框的不确定-> true

<v-template>

  <v-checkbox
     v-model="item_1.checked"
     :indeterminate="item_1.indeterminate"
   ></v-checkbox>

   <v-checkbox
    @change="onTest($event)"
     v-model="item_2.checked"
     :indeterminate="item_2.indeterminate"
   ></v-checkbox>
</v-template>
<script>
    methods: {
        onTest(event) {
            if(event) {
                this.item_1.indeterminate = true;
                this.item_1.checked = false;
            }
        } 
    }
    data(){
        return {
            item_1: {
                    name: 'test 1'
                    checked: false,
                    indeterminate: false
                },
            item_2: 
                {
                    name: 'test 1'
                    checked: false,
                    indeterminate: false
                },

        }
    }
</script>

【问题讨论】：

标签： vuetify.js

【解决方案1】：

更新了代码，现在可以正常使用了

<v-template>
    <div id="app">
        <v-app id="inspire">
            <div>
                <v-checkbox
                    @change="onTest($event, 1, 2)"
                    v-model="item_1.checked"
                    :indeterminate="item_1.indeterminate"
                ></v-checkbox>
                <v-checkbox
                    @change="onTest($event, 2, 1)"
                    v-model="item_2.checked"
                    :indeterminate="item_2.indeterminate"
                ></v-checkbox>
            </div>
        </v-app>
    </div>
</v-template>
<script>
    new Vue({
    el: '#app',
    vuetify: new Vuetify(),
    methods: {
        onTest(event, value, next) {
            if (event) {
                this[`item_${next}`].checked = false;
                this[`item_${next}`].indeterminate = true;
            } else {
                this[`item_${value}`].checked = false;
                this[`item_${value}`].indeterminate = true;
            }

        },
    },
    data: () => ({
        item_1: {
            name: 'test 1',
            checked: true,
            indeterminate: false
        },
        item_2: 
        {
            name: 'test 2',
            checked: false,
            indeterminate: true
        },
 })
})
</script>

【讨论】：

感谢您的回答。是的，默认值丢失了，对此感到抱歉。尽管如此，问题仍然存在。当 item_1 已检查标志为真且不确定标志为假时。如果我尝试将 item_1 已检查标志切换为 false 并将终止标志切换为 true。取消选中 item_2 复选框时。
我已经更新了上面代码中的 onTest 方法，现在检查这些变化
codepen.io/kavin404/pen/rNNOXKB?editors=1010 这是代码。如果我继续点击第二个复选框，它最终会开始取消选中而不会不确定
在 if 条件中，您同时保持不确定和检查为真，执行顺序首先更新不确定，然后检查。检查的最后执行并将其设置为true
如果取消选中第二个框，只需将不确定和选中都设置为 false。对吗？