Question

我正在尝试在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>

Answer 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>

vuetify v-checkbox中如何检查和不确定？

1 个答案: