Make vue slot structure similar to material ui

Question

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?

Answer 1

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>