如何在 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: [],
})

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

根据后台返回数据，如果对应的名称下的数值为0 就为不选中状态，否则就选中，例如返回的数据是“gga_freq:0”,那么checkbox对应的label=‘GGA’就是未选中状态。请问我该如何才能实现，打开界面就可以看见已经被选择的多选框?
问题二：
如果返回的对应名称下的数值为0，对应的checked是未选中状态并且input框是0并呈现不能编辑状态，除非是重新选中了对应的checked并在input内填写了大于0的数值。如果返回的数据时是不为0的状态，checked显示选中状态并且input内会显示相应的值？
...

Answer 1

<script setup>
import { reactive, onMounted } from 'vue';
import axios from 'axios';

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,
});


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();
});
</script>

Answer 2

题主没有明确说明，暂时假设后端有返回就算被选中

那么只需要改一下后端返回数据就行了（截取下划线前面的部分再转大写）

<script setup>
// 假设已经通过请求拿到了后端数据存在res中
let res = []
res = res.map(r => r.substring(0, r.indexOf('_')).toUpperCase())
const GNSS = reactive({
  GNSSData: res,
})
</script>

如果是通过其他情况判断多选框是否选择，那需要题主进一步说明

Answer 3

<template>
  {{ GNSS.GNSSData }}
  <el-checkbox-group v-model="GNSS.GNSSData">
    <div v-for="value, key in obj" :key="key" style="display: flex;">
      <el-checkbox :label="key" name="type">{{ setLabel(key) }}</el-checkbox>
      <div style="width: 240px;"> <el-input v-model="obj[key]" :disabled="!GNSS.GNSSData.includes(key)"></el-input></div>
    </div>
  </el-checkbox-group>
</template>
<script setup>
const GNSS = reactive({
  GNSSData: [],
})
/** 设置label */
const setLabel = (str) => {
  return str.split('_')[0].toUpperCase()
}
//请求中
let obj = reactive({
  "gga_freq": 8,
  "rmc_freq": 9,
  "dop_freq": 10,
  "gsa_freq": 11,
  "gsv_freq": 12,
  "heading_freq": 13,
  "zda_freq": 14,
  "gst_freq": 0,
})//后端返回数据

for (let x in obj) {
  if (obj[x]) {
    GNSS.GNSSData.push(x)
  }
}
</script>

<template>
  {{ GNSS.GNSSData }}
  <el-checkbox-group v-model="GNSS.GNSSData">
    <el-checkbox :label="key" name="type" v-for="value, key in obj" :key="key">{{ setLabel(key) }}</el-checkbox>
  </el-checkbox-group>
</template>
<script setup>
const GNSS = reactive({
  GNSSData: [],
})
/** 设置label */
const setLabel = (str) => {
  return str.split('_')[0].toUpperCase()
}
//请求中
let obj = {
  "gga_freq": 8,
  "rmc_freq": 9,
  "dop_freq": 10,
  "gsa_freq": 11,
  "gsv_freq": 12,
  "heading_freq": 13,
  "zda_freq": 14,
  "gst_freq": 0,
} //后端返回数据

for (let x in obj) {
  if (obj[x]) {
    GNSS.GNSSData.push(x)
  }
}
</script>