Vue3 中 checkbox-group 组件初始化选中状态与后端数据及输入框值的同步
本文探讨如何在 Vue3 中使用 checkbox-group 组件，实现多选框的初始化选中状态与后端返回的数据以及对应的输入框值和状态同步。
解决方案：组合式 API 和 Axios
以下代码示例演示如何使用组合式 API 和 Axios 库实现此功能：
立即学习“前端免费学习笔记（深入）”；
{{ item }}
代码说明:
- 使用
reactive创建响应式对象gnss来存储多选框数据和输入框值。 - 使用
computed计算属性checkboxOptions，确保checkbox选项不会重复。 -
fetchBackendData函数使用 Axios 从/api/gnss-data获取后端数据。 - 遍历后端数据，更新
gnss对象中对应的输入框值 (input_xxx)。 - 如果后端数据值不为 0，则将对应的 checkbox 标签添加到
gnss.gnssData数组中，从而更新checkbox-group的选中状态。 - 使用
v-model将gnss.gnssData与el-checkbox-group绑定，实现双向数据绑定。 - 使用
v-for循环渲染 checkbox 选项和输入框。 -
onMounted钩子确保在组件挂载后立即获取后端数据。
此改进后的代码更清晰地处理了数据，并使用了计算属性来提高代码的可读性和可维护性，避免了重复的 checkbox 选项。 记住替换 /api/gnss-data 为你的实际后端 API 地址。 同时，你需要安装 axios 和 element-plus。
This revised answer provides a more robust and maintainable solution. Remember to install the necessary packages (axios and element-plus) before running this code.
