Search code examples
vuejs2bootstrap-vue

How to pass key as variable to template in Bootstrap-Vue tables

There is a new syntax for scoped field slots in tables, see https://bootstrap-vue.js.org/docs/components/table#scoped-field-slots , which looks like

<template v-slot:cell(myColumn)="data">
...

where myColumn is interpreted as a string - key of field from fields to display in our table.

How can I use a variable instead of string? Let's say something like:

let myColumnName = "myColumn";

<template v-slot:cell(myColumnName)="data">
...
Solution

  • When using the new v-slot syntax of Vue 2.6.x, you can use the dynamic slot name syntax.

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

    or set the full slot name in a variable:

    let fieldName = 'myColumn'
let slotName = `cell(${fiedlName})`

    <template v-slot:[slotName]="data">

    Anything between the square brackets is interpreted as a javascript expression. Just note that you cannot have spaces in the expression (HTML attribute names cannot have spaces).

    The second example above is your best bet when using DOM templates. Just note that your variable names should probably be lower cased when using DOM templates (the browser lower cases everything before the = when it parses the template).

    If using Single File Components (SFC), then you do not need to worry about letter casing.