Vuetify数据表格获取嵌套对象名称遇skillName未定义问题求助

我尝试在Vuetify的v-data-table中从数据列表里获取NAME字段，但skillName显示为undefined，期望能显示类似Writing,Singing这类内容。以下是我的代码：

HTML模板 #

<v-data-table :headers="headers" :items="topics" :footer-props="{'items-per-page-options': [5, 10, 20, 40]}" :items-per-page="10" item-key="srno">
   <template v-slot:item.skillName="{ item }">
       <span>{{ item.skillName || '-' }}</span>
   </template>
</v-data-table>

脚本代码 #

export default {
  data () {
    return {
      skills: [
        {
          name: ''
        }
      ],
      topics: [],
      headers: [
        { text: 'Sr No', value: 'srno', align: 'center', sortable: true },
        { text: 'Skills', value: 'skills', align: 'center' },
      ],
      skillName: [],
    }
  },
  created: async function () {
    await this.getAllList()
  },
  methods: {
    getAllList: async function () {
      try {
        this.isLoading = true
        let res = await http.get(`${CONSTANTS.API_URL}/api/getall-themes`, {
          params: {
            page: this.page - 1,
            size: this.pageSize
            // search: this.search
          }
        })
        this.topics = res.data.rows.map((item, index) => {
          item.srno = this.pageSize * (this.page - 1) + index + 1
          item.skillName = item.Skills ? item.Skills.name : '-'
          return item
        })
        this.totalPages = res.data.totalPages
      } catch (e) {
        const errorMessage = (e && e.response && e.response.data.message) || e.message
        this.errMsg(errorMessage)
      } finally {
        this.isLoading = false
      }
    },
  }
}

错误情况：skillName显示为undefined
期望输出：skillName显示Writing,Singing这类技能名称

1. 检查API返回的Skills结构 #

如果API返回的Skills是数组（对应多个技能），直接读取item.Skills.name会返回undefined，因为数组没有name属性。这种情况需要遍历数组拼接名称：

item.skillName = item.Skills && item.Skills.length > 0 
  ? item.Skills.map(skill => skill.name).join(', ') 
  : '-'

2. 字段名大小写匹配 #

后端返回的字段名可能和你写的大小写不一致（比如实际是skills而非Skills），导致读取不到值。可以在map里打印日志确认：

this.topics = res.data.rows.map((item, index) => {
  console.log(item) // 查看实际返回的字段结构
  item.srno = this.pageSize * (this.page - 1) + index + 1
  item.skillName = item.skills ? item.skills.name : '-' // 改成对应大小写的字段名
  return item
})

3. 表头与插槽匹配 #

你的表头headers中Skills对应的value是skills，但插槽用的是item.skillName，二者需要对应：

• 方案一：修改表头value为skillName

headers: [
  { text: 'Sr No', value: 'srno', align: 'center', sortable: true },
  { text: 'Skills', value: 'skillName', align: 'center' },
],

• 方案二：调整插槽为item.skills

<template v-slot:item.skills="{ item }">
    <span>{{ item.skillName || '-' }}</span>
</template>

4. 简化空值判断 #

用可选链操作符?.避免嵌套属性读取报错，简化代码：

// 单个技能场景
item.skillName = item.Skills?.name || '-'
// 多个技能场景
item.skillName = item.Skills?.map(s => s.name).join(', ') || '-'

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