vue.jsvuejs2vue-componentbootstrap-vuevue-slot

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


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?


Solution

  • 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']
    })