checkbox-group 如何 实现回显

在前端开发中，特别是使用Vue.js等框架时，Checkbox Group（复选框组）通常用于显示一组选项供用户选择，并且需要支持数据绑定和状态同步。如果要实现在页面加载时根据后台数据进行回显，你可以按照以下步骤操作：

1. 定义数据结构：首先，在组件的数据对象中定义一个数组，包含每个checkbox项的标题和初始状态（默认是否勾选）。例如：

data() {
  return {
    options: [
      { title: 'Option 1', value: '1', checked: false },
      { title: 'Option 2', value: '2', checked: true },
      // ...
    ]
  }
}

2. 使用v-model绑定：在HTML模板中，将`v-model`指令连接到`options`数组上，这样当用户点击checkbox时，对应的值会更新到数据模型。

<template>
  <div>
    <ul>
      <li v-for="(item, index) in options" :key="index">
        <input type="checkbox"
               :id="item.title"
               :value="item.value"
               :checked="item.checked"
               @change="updateChecked(index)">
        <label :for="item.title">{{ item.title }}</label>
      </li>
    </ul>
  </div>
</template>

3. 更新函数：创建一个如`updateChecked`的函数，处理用户的输入并更新数据模型。

methods: {
  updateChecked(index) {
    this.options[index].checked = !this.options[index].checked;
  }
}

4. 回显数据：当你从后端获取数据时，遍历这些数据并将`checked`属性设置为对应的状态，然后更新视图。

mounted() {
  const backendData = ... // 后端返回的包含checkbox状态的数据
  this.options.forEach((item, index) => {
    item.checked = backendData.includes(item.value);
  });
}