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

Question

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

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

但是麻烦的是这是个对象数组，大概格式为

list=[{id:1,name:'张三'}，｛id:2,name:'李四'｝]

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

Answer 1

参考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字段。