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