Как передать ключ в качестве переменной в шаблон в таблицах Bootstrap-Vue
Существует новый синтаксис для слотов полей с областью видимости в таблицах, см. 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">
...
Ответы - Как передать ключ в качестве переменной в шаблон в таблицах Bootstrap-Vue / How to pass key as variable to template in Bootstrap-Vue tables
16.09.2019 05:22:45
При использовании нового v-slotVue 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), то вам не нужно беспокоиться о корпусе письма.