0

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?

Ryan Garde
  • 742
  • 1
  • 7
  • 20

1 Answers1

2

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>
Juan Portillo
  • 86
  • 4
  • Your answer is right but I change the ```:name="header.value"``` to ```:name="`item.${header.value}`"```. I'm just confused because I was expecting a blank data since you have to have a slot for the data to show but it falls back to ```item[header.value]``` – Ryan Garde May 25 '21 at 15:51
  • Nevermind now that I think of it any children of the slot is the fallback – Ryan Garde May 25 '21 at 15:52