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

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>