Vue3 and Element plus dynamic column not show data - vuejs3

Question

I try to loop through Element-plus table column as <el-table-column v-for="(d ,i) in data.values" :key="i" :prop="d.value" :label="d.label" /> but no result showed in browser I trying google for hours and trying several examples and solutions but nothing works for me on this issue.
full example here
<template>
<el-table :data="data" class="full-table">
<el-table-column fixed prop="name" label="Employee" width="250"/>
<el-table-column prop="phone" label="Phone"/>
<el-table-column v-for="(d ,i) in data.values" :key="i" :prop="d.value" :label="d.label" />
</el-table>
</template>
<script setup lang="ts">
import {ElTable, ElTableColumn} from 'element-plus'
const data = [
{
name: 'personal1',
phone: [phone],
values: [
{
label: 'email',
value: 'personal1#mail.com',
}
]
},
{
name: 'personal2',
phone: [phone],
values: [
{
label: 'email',
value: 'personal2#mail.com',
}
]
},
]
</script>
The result is show like this no extra column for v-for
What do i do wrong?. please advice

Answer 1

You don't need value in the template as explained here.
Try with v-for="(d ,i) in data" and :prop="d".
Also, feel free to double check what you have in your Vue devtools to be sure.
I don't have an Element UI example but this is how the Vue part works when using the Composition API.
<template>
<div v-for="(d ,i) in data" :key="d.name" :prop="d" :label="d.label">
{{ d.name }}
</div>
</template>
<script setup lang="ts">
import { reactive } from 'vue'
const data = reactive([
{
name: 'personal1',
phone: [phone],
values: [
{
label: 'email',
value: 'personal1#mail.com',
}
]
},
{
name: 'personal2',
phone: [phone],
values: [
{
label: 'email',
value: 'personal2#mail.com',
}
]
},
])
</script>
Overall, I recommend that you give a read to that part of the doc to have a fully usable Vue example with some working reactivity.
Element UI's prop will follow up accordingly.