Vue3 中 checkbox-group 组件初始化选中状态与后端数据及输入框值的同步
本文探讨如何在 Vue3 中使用 checkbox-group 组件，实现多选框的初始化选中状态与后端返回的数据以及对应的输入框值和状态同步。
解决方案：组合式 API 和 Axios
以下代码示例演示如何使用组合式 API 和 Axios 库实现此功能：
立即学习“前端免费学习笔记（深入）”；
{{ item }} import { reactive, onMounted, computed } from 'vue';import axios from 'axios';export default { setup() { const gnss = reactive({ gnssData: [], input_gga: 0, input_rmc: 0, input_dop: 0, input_gsa: 0, input_gsv: 0, input_heading: 0, input_zda: 0, input_gst: 0, }); const inputValues = computed(() => { return { input_gga: gnss.input_gga, input_rmc: gnss.input_rmc, input_dop: gnss.input_dop, input_gsa: gnss.input_gsa, input_gsv: gnss.input_gsv, input_heading: gnss.input_heading, input_zda: gnss.input_zda, input_gst: gnss.input_gst, }; }); const checkboxOptions = computed(() => { return [...new Set(gnss.gnssData.map(item => item))]; }); async function fetchBackendData() { try { const response = await axios.get('/api/gnss-data'); const backendData = response.data; for (const [key, value] of Object.entries(backendData)) { const inputKey = `input_${key.split('_')[0]}`; gnss[inputKey] = value; if (value !== 0) { const checkboxLabel = key.toUpperCase().replace('_FREQ', ''); gnss.gnssData.push(checkboxLabel); } } } catch (error) { console.error('Failed to fetch backend data:', error); } } onMounted(() => { fetchBackendData(); }); return { gnss, inputValues, checkboxOptions }; },};代码说明:
使用 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.
以上就是Vue3中如何实现checkbox-group多选框初始化选中状态与后端数据和输入框值的同步？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/190445.html
微信扫一扫 
支付宝扫一扫 
