Vue3+Laravel嵌套数组数据提取与多选框赋值问题

假设后端返回的数据结构 #

先明确下后端返回的嵌套数据格式（你需要根据实际结构调整）：

// 示例后端返回数据
const backendResponse = {
  additional_bank: [
    {
      id: 1,
      name: '银行A',
      additional_bank_house: {
        house: {
          house_id: 1,
          house_name: '住宅1'
        }
      }
    },
    {
      id: 2,
      name: '银行B',
      additional_bank_house: {
        house: {
          house_id: 2,
          house_name: '住宅2'
        }
      }
    }
  ]
}

Vue3 组件代码实现 #

<template>
  <div>
    <!-- 多选框组 -->
    <el-checkbox-group v-model="selectedHouses">
      <el-checkbox
        v-for="house in houseOptions"
        :key="house.house_id"
        :label="house.house_id"
      >
        {{ house.house_name }}
      </el-checkbox>
    </el-checkbox-group>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
// 假设你用axios请求后端数据，这里模拟请求
import axios from 'axios'

const selectedHouses = ref([])
const houseOptions = ref([])

onMounted(async () => {
  try {
    // 请求后端数据
    const res = await axios.get('/api/your-endpoint')
    const backendData = res.data

    // 提取 additional_bank 中的 additional_bank_house->house 数据
    const extractedHouses = backendData.additional_bank.map(item => {
      // 空值判断，避免层级缺失报错
      if (item.additional_bank_house && item.additional_bank_house.house) {
        return item.additional_bank_house.house
      }
      return null
    }).filter(Boolean) // 过滤无效数据

    // 添加 house_id 为5的自定义元素
    const customHouse = { house_id: 5, house_name: '自定义住宅' }
    houseOptions.value = [...extractedHouses, customHouse]

    // 如需默认选中项，可在此设置
    // selectedHouses.value = [1, 5]
  } catch (err) {
    console.error('请求数据失败:', err)
  }
})
</script>

关键说明 #

• 加入空值判断逻辑，避免后端返回层级缺失时出现报错
• 用扩展运算符合并原有数据与自定义元素，保证原数据不被污染
• 多选框v-model绑定的是选中的house_id数组，若需绑定整个对象，修改label属性为对应对象即可

内容的提问来源于stack exchange，提问作者Dastan Zholdas