在vue的插槽中想要显示一段数据

在vue的插槽中想要显示一段数据


```html
<template #default="{ row }">
              <span>{{ row.list }}</span>
</template>


但是麻烦的是这是个对象数组,大概格式为
list=[{id:1,name:'张三'},{id:2,name:'李四'}]

而我想要显示的字段就是name,直接写{{row.list[0].name}}还报错,求解决方法

参考GPT和自己的思路:在vue的插槽中想要显示对象数组中的某个字段,可以通过使用v-for指令来循环遍历数组,然后使用插值表达式来展示需要的字段信息。具体实现方式如下:

<template #default="{ row }">
  <span>
    <span v-for="(item, index) in row.list" :key="index">{{ item.name }}</span>
  </span>
</template>

在这里,我们使用了v-for指令来循环遍历row.list数组。然后使用插值表达式来展示数组中item对象的name字段。通过这种方式,我们可以展示列表中所有item对象的name字段,而不仅仅是第一个对象的name字段。