This is my code so far:
<tr :key="index" v-for="(item, index) in items">
<td v-for="header in headers" :key="header.value">
{{ item[header.value] }}
</td>
<td>
<slot name="actions" v-bind:item="data[index]"></slot>
</td>
</tr>
What I want is to have and override table column slot similar to material ui, like this:
<template v-slot:item.age="{item}">
<div> {{formatAge(item.age)}} </div>
</template>
How do I achieve named slots like that where they treat it like an object?
I think something like this should work:
<tr :key="index" v-for="(item, index) in items">
<td v-for="header in headers" :key="header.value">
<slot :name="header.value" v-bind:item="item">
{{ item[header.value] }}
</slot>
</td>
<td>
<slot name="actions" v-bind:item="data[index]"></slot>
</td>
</tr>
And then, to override the default slot value:
<template v-slot:age="{item}">
<div> {{formatAge(item.age)}} </div>
</template>