vuetify.js - 如何在 vuetify v-checkbox 中处理选中和不确定?
问题描述
我正在尝试在 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>
解决方案
更新了代码,现在可以正常使用了
<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>
推荐阅读
- c - 设置全局字符的 C 函数*
- c - C - 按输出顺序打印的问题
- linux - 为什么在根文件夹中拥有 777 权限不允许我登录?
- c++ - 使用 Googlemock 进行依赖注入和模拟的实用示例
- kubernetes - 使用 nvim-lspconfig 为自动完成设置 yaml.schema “kubernetes”
- typescript - RxJS switchMap/mergeMap 导致 Obserable
- python - 在 docker 容器内设置环境路径
- php - I'm getting an error when trying to make an SMTP connection with PHP?
- c++ - 如何正确地将输入读入动态分配的对象数组
- c# - 使用 C# 读取 Windows Embedded Automotive 生成的二进制文件