为什么 \"checked\" 不会让 Toggle 按钮默认选中？

Question

我使用以下行在自定义表单中有一组切换按钮：

    <div class="calc-toggle-wrapper">
        <input type="checkbox" :checked="element.isChecked" :value="element.value" @change="change(event, element.label)" />
        <label></label>
    </div>

我想让所有这些切换按钮默认“打开”或“选中”。我将以下内容添加到 input () 标记的末尾，但没有任何效果：

1. 检查
2. 选中=“选中”
3. 选中=“真”

   默认情况下，我的表单上的切换按钮仍未选中。我不确定为什么它不起作用或我在这里做错了什么。任何建议将不胜感激。谢谢你。

Answer 1

您可以使用计算属性来设置复选框的默认值。例如：

computed: {
  isChecked: {
    get() {
      return this.element.isChecked;
    },
    set(value) {
      this.element.isChecked = value;
      // Add the value to the form here
    }
  }
}

然后，在您的模板中，您可以使用 v-model 指令将复选框绑定到 isChecked 值：

<div class="calc-toggle-wrapper">
  <input type="checkbox" v-model="isChecked" :value="element.value" @change="change(event, element.label)" />
  <label></label>
</div>