Dynamically create template slots in Bootstrap Vue <b-table>

Question

I'm trying to add HTML to headers in a Vue table. Knowing the key of the field I can do something like this:

<template v-slot:head(my_key)="data">
<span v-html="data.field.label" />
</template>

However, my table will have an unknown number of columns each with unknown keys to start (pulled in through axios). Is there a way to dynamically set my_key after I retrieve all of the keys from my server?

Answer 1

You can use dynamic slot names to target the header slot with a variable. Assuming my_key in your pseudo-code example above is the name of a variable, then your example could be rewritten with a template literal:

<template v-slot:[`head(${my_key})`]="data">

You can then use the table's fields array, or any array of keys, with a v-for to target all of the table header slots:

<template v-for="field in fields" v-slot:[`head(${field})`]="data">
  <span v-html="data.field.label" />
</template>

data: () => ({
  fields: ['a', 'b', 'c']
})

Answer 2

Just for the sake of completion and for people that might be looking at older code (and perhaps struggling with the syntax as I was), an alternative solution to @Dan's one, based on a depreciated syntax could be something like:

<template
  v-for="{key} in fields"
  :slot="`HEAD_${key}`"
  slot-scope="{label}"  
>
  <span v-html="label" />
</template>