如何在 Vue 中正确设置复选框（Toggle Button）的默认选中状态

在 vue 中，直接使用 `checked` 属性或 `:checked` 绑定无法控制表单控件的初始选中状态；必须通过响应式数据 + `v-model` 实现双向绑定，才能让复选框默认“勾选”。

Vue 的 是受控组件（controlled component），其选中状态完全由 Vue 数据驱动，而非原生 DOM 属性。因此，以下写法无效：

✅ 正确做法是：确保 element.isChecked 在组件初始化时即为 true（响应式），并改用 v-model 进行双向绑定：

同时，在 data() 或 setup() 中预先设置默认值：

// Options API 示例
export default {
  data() {
    return {
      elements: [
        { label: 'Option A', value: 'a', isChecked: true },  // ✅ 默认为 true
        { label: 'Option B', value: 'b', isChecked: true },
        { label: 'Option C', value: 'c', isChecked: true }
      ]
    }
  }
}

⚠️ 注意事项：v-model 会自动处理 change 事件和 checked 状态同步，无需额外 @change（除非需额外逻辑）；若 element.isChecked 来自 props 或异步数据，请确保它在渲染前已初始化（例如在 created/onMounted 中赋值）；使用 Composition API 时，应通过 ref() 或 reactive() 声明响应式字段，并确保其初始值为 true。

总结：Vue 中表单元素的默认状态取决于响应式数据的初始值，而非 HTML 属性。始终优先使用 v-model 绑定 checkbox，配合合理的数据初始化，即可稳定实现默认“开启”效果。