Question

我正在尝试获取vuetify复选框以准确显示正确的检查值。例如，我正在用3个状态[全部，部分，无]选中全部复选框。如果状态为none，则应取消选中该框。如果状态为全部，则应对其进行检查，并且某种方式表示状态不确定。我的问题是，当输入值计算为false并单击v-checkbox时，即使馈送到组件的值表示应取消选中，该复选框也将显示为已选中。如何强制复选框始终为输入值应为的值？

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

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

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

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

如何使Vuetify复选框准确反映其价值？

1 个答案: