javascript - 如何在 Vue3 中使用 checkbox-group 初始化时实现多个多选框选中状态同步?

Question

  <el-checkbox-group v-model="GNSS.GNSSData">                    <el-checkbox label="GGA" name="type" />                    <el-checkbox label="RMC" name="type" />                    <el-checkbox label="DOP" name="type" />                    <el-checkbox label="GSA" name="type" />                    <el-checkbox label="GSV" name="type" />                    <el-checkbox label="HEADING" name="type" />                    <el-checkbox label="ZDA" name="type" />                    <el-checkbox label="GST" name="type" />                  </el-checkbox-group>const GNSS = reactive({  GNSSData: [],})

当后台返回的数据是这样时。

根据后台返回数据，请问我该如何才能实现，打开界面就可以看见已经被选择的多选框?

...

Answer 1

要实现这个需求，你需要将后台返回的数据和 Vue 组件中的数据进行同步。首先，确保返回的数据格式和组件中的数据格式一致，例如，你可以将返回的数据转换成对象的键值对形式，每个多选框的 label 作为键，对应的值（例如 true 或 false）作为值。

以下是一个示例代码：

<template>  <el-checkbox-group v-model="GNSS.GNSSData">    <el-checkbox label="GGA" name="type" :checked-value="GNSS.GNSSData['GGA']" />    <el-checkbox label="RMC" name="type" :checked-value="GNSS.GNSSData['RMC']" />    <el-checkbox label="DOP" name="type" :checked-value="GNSS.GNSSData['DOP']" />    <el-checkbox label="GSA" name="type" :checked-value="GNSS.GNSSData['GSA']" />    <el-checkbox label="GSV" name="type" :checked-value="GNSS.GNSSData['GSV']" />    <el-checkbox label="HEADING" name="type" :checked-value="GNSS.GNSSData['HEADING']" />    <el-checkbox label="ZDA" name="type" :checked-value="GNSS.GNSSData['ZDA']" />    <el-checkbox label="GST" name="type" :checked-value="GNSS.GNSSData['GST']" />  </el-checkbox-group></template><script>import { reactive } from 'vue'export default {  setup() {    const GNSS = reactive({      GNSSData: {}, // 初始化为空对象，用于存储多选框的状态    })    // 假设你有一个名为 `fetchData` 的方法用于获取后台返回的数据    const fetchData = async () => {      const data = await fetchFromBackend() // 假设这是从后台获取数据的异步函数      // 将返回的数据转换成对象的键值对形式，并赋值给 GNSS.GNSSData      for (const checkbox of Object.keys(data)) {        if (data[checkbox]) {          GNSS.GNSSData[checkbox] = true        } else {          GNSS.GNSSData[checkbox] = false        }      }    }    // 在组件加载时调用 fetchData 方法获取后台返回的数据    fetchData()    return { GNSS }  },}</script>

在这个示例代码中，我们使用了 Vue 3 的 setup 函数来创建响应式数据 GNSS。在模板中，我们使用了 v-model 指令将 GNSS.GNSSData 与 el-checkbox-group 组件进行双向绑定。每个 el-checkbox 组件的 :checked-value 属性绑定了对应的后台返回数据的值。这样，当后台返回的数据发生变化时，Vue 组件会自动更新多选框的状态。