Как передать ключ в качестве переменной в шаблон в таблицах Bootstrap-Vue

Как передать ключ в качестве переменной в шаблон в таблицах Bootstrap-Vue

16.09.2019 05:08:10 Просмотров 58 Источник

Существует новый синтаксис для слотов полей с областью видимости в таблицах, см. 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

Hiws

16.09.2019 05:13:39

Чтобы передать переменные, вы должны добавить квадратные скобки вокруг всего этого.

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

или (в зависимости от того, что вы предпочитаете)

v-slot:['cell('+myColumnName+')']="data"

Является ответом!
Troy Morehouse

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), то вам не нужно беспокоиться о корпусе письма.

Закрыть X