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

作者站长头像
站长
· 阅读数 5
  <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: [],
})

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

回复
1个回答
avatar
test
2024-06-23
<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>
回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引，对解决问题有帮助
  • 遵循 Markdown 语法排版，代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容