为什么这个 vuetify 复选框不会根据布尔值显示为选中或未选中？

Question

我不确定这是否是 vuetify 的错误，或者我不了解 Vue 的一些基本知识。我正在尝试使用它的 :value 道具设置一个 vuetify 复选框的值。我没有使用v-model，因为我不需要双向绑定。我只想根据我的组件中的布尔值设置它的检查状态。

boolean值是在computed中计算出来的，但是当值改变时，checkbox没有响应。这是一个代码笔：

https://codepen.io/flyingl123/pen/PoPKYYX

我希望在页面加载时看到复选框被选中，但事实并非如此：

<div id="app">
  <v-app id="inspire">
    <div>
      <v-row justify="space-around">
        <v-checkbox :value="boolValue" class="mx-2" label="Checkbox"></v-checkbox>
      </v-row>
    </div>
  </v-app>
</div>

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({}),
  computed: {
    boolValue() {
      return true;
    }
  }
})

如果我在 Vue 开发工具中检查复选框组件，我会看到 value 属性具有正确的 true 设置，但未选中该框。

在我的实际应用程序中，当boolValue 更改时，我确实看到复选框获得了正确的道具值，但该框仍然没有被选中或未选中。这是为什么呢？

Answer 1

显然 vuetify 复选框使用 prop input-value，而不是 value：

https://github.com/vuetifyjs/vuetify/issues/11119#issuecomment-614420583

Answer 2

flyingL123 的 answer 已经声明 input-value 属性适用于 v-checkbox。

我想补充一些信息：

所有 Vuetify 表单输入组件都有 value 属性，但有两个组件不使用它进行模型绑定（v-checkbox + v-switch）。这会导致混淆，尤其是当 value 属性仍然存在时，也在 api 文档中：

v-textfield 和几乎所有其他输入：

value               输入值

v-checkbox/v-switch:

input-value     v-model 界限值
[...]
value               输入值

在其他道具中间很容易错过input-value。我认为这些布尔输入使用input-value 可能是有原因的。很遗憾，这在文档中并没有真正明确。

Answer 3

您需要将:value 替换为v-model

<div id="app">
  <v-app id="inspire">
    <div>
      <v-row justify="space-around">
        <v-checkbox v-model="boolValue" class="mx-2" label="Checkbox"></v-checkbox>
      </v-row>
    </div>
  </v-app>
</div>