如何让 Vuetify 复选框准确反映它的价值？

Question

我正在尝试让 vuetify 复选框准确显示正确的检查值。例如，我正在选中一个包含 3 个状态 [全部、一些、无] 的所有框。如果状态为"无"，则应取消选中该框。如果状态是全部，那么应该检查它，有些意味着它是不确定的。我的问题是，当输入值计算为 false 并且单击 v 复选框时，复选框将显示为选中，即使提供给组件的值说它应该取消选中。如何强制复选框始终是输入值所说的应该是什么？

https://codepen.io/anon/pen/QRxoqL?&editable=true&editors=101

<v-checkbox :input-value="val"></v-checkbox>
...
data(){
return {
val: false,
}
},

这是一个更简单的版本，但它说明了我的问题。当我在未选中状态下单击复选框时，除非"val"变量更改为 true，否则它应该保持未选中状态。这将允许我使用一种方法来确定复选框应显示为什么状态并实际显示该状态。

Answer 1

我设法通过使用只读属性并将复选框包装在一个具有事件将传播到的@click的跨度中来解决此问题。

https://codepen.io/RuttyJ/pen/MdXRXQ?editors=1010

<span @click="toggleValue()">
<v-checkbox readonly :input-value="val"></v-checkbox>
</span>