Vue3中如何根据后台数据初始化el-checkbox-group和input框？-js教程-PHP中文网

Vue3中如何根据后台数据初始化el-checkbox-group和input框？

碧海醫心

发布： 2025-02-22 12:02:19

原创

337人浏览过

vue3中如何根据后台数据初始化el-checkbox-group和input框？

Vue3中动态初始化el-checkbox-group和input框

本文介绍如何在Vue3项目中，利用后台返回的数据动态初始化Element Plus的el-checkbox-group组件和input输入框的状态和值。

一、el-checkbox-group初始选中状态

假设后台返回的数据格式为一个键值对对象，键表示checkbox的label，值表示是否选中(例如：1为选中，0为未选中)。我们可以这样实现：

立即学习“前端免费学习笔记（深入）”；

import { reactive, onMounted } from 'vue';
import axios from 'axios';

const gnss = reactive({
  gnssdata: [], // 存储选中的checkbox label
});

const fetchBackendData = async () => {
  try {
    const { data } = await axios.get('/api/gnss-data');
    gnss.gnssdata = Object.entries(data)
      .filter(([key, value]) => value === 1) // 过滤出选中项
      .map(([key]) => key.toUpperCase().replace('_FREQ', '')); // 转换key为checkbox label
  } catch (error) {
    console.error('Failed to fetch backend data:', error);
  }
};

onMounted(() => {
  fetchBackendData();
});

登录后复制

在模板中：

<el-checkbox-group v-model="gnss.gnssdata">
  <el-checkbox label="GGA"></el-checkbox>
  <el-checkbox label="RMC"></el-checkbox>
  <!-- ... other checkboxes ... -->
</el-checkbox-group>

登录后复制

二、input框的可编辑性和初始值

假设后台返回的数据格式与上面相同，我们可以这样处理input框：

import { reactive, onMounted } from 'vue';
import axios from 'axios';

const gnssInput = reactive({
  input_gga: null,
  input_rmc: null,
  // ... other inputs ...
});

const fetchBackendData = async () => {
  try {
    const { data } = await axios.get('/api/gnss-data');
    for (const [key, value] of Object.entries(data)) {
      const inputKey = `input_${key.split('_')[0]}`;
      gnssInput[inputKey] = value;
      if (value === 0) {
        // 使用ref获取dom元素，设置disabled属性
        const inputElement = document.getElementById(inputKey);
        if (inputElement) inputElement.disabled = true;
      }
    }
  } catch (error) {
    console.error('Failed to fetch backend data:', error);
  }
};

onMounted(() => {
  fetchBackendData();
});

登录后复制

在模板中：

<el-input id="input_gga" v-model="gnssInput.input_gga"></el-input>
<el-input id="input_rmc" v-model="gnssInput.input_rmc"></el-input>
<!-- ... other inputs ... -->

登录后复制

改进说明: