Появился новый синтаксис для слотов полей с заданной областью в таблицах, см. https://bootstrap-vue.js.org/docs/components/table#scoped-field-slots, который выглядит как
<template v-slot:cell(myColumn)="data">
...
где myColumn интерпретируется как строка - ключ поля из полей для отображения в нашей таблице.
Как я могу использовать переменную вместо строки? Скажем так:
let myColumnName = "myColumn";
<template v-slot:cell(myColumnName)="data">
...
При использовании нового синтаксиса v-slot Vue 2.6.x вы можете использовать синтаксис имени динамического рекламного места.
<template v-slot:[`cell(${myColumnName})`]="data">
или задайте полное имя слота в переменной:
let fieldName = 'myColumn'
let slotName = `cell(${fiedlName})`
<template v-slot:[slotName]="data">
Все, что находится в квадратных скобках, интерпретируется как выражение javascript. Просто обратите внимание, что вы не можете содержать пробелов в выражении (в именах атрибутов HTML не должно быть пробелов).
Второй пример выше лучше всего подходит для использования шаблонов DOM. Просто обратите внимание, что имена ваших переменных, вероятно, должны быть в нижнем регистре при использовании шаблонов DOM (браузер записывает в нижний регистр все, что до =, когда он анализирует шаблон).
Если вы используете однофайловые компоненты (SFC), вам не нужно беспокоиться о регистре букв.
Чтобы передать переменные, вы должны заключить все в квадратные скобки.
v-slot:[`cell(${myColumnName})`]="data"
или (в зависимости от того, что вы предпочитаете)
v-slot:['cell('+myColumnName+')']="data"
