Vue и Bootstrap Vue - динамически использовать слоты - PullRequest
Новая
       29

Vue и Bootstrap Vue - динамически использовать слоты

0 голосов
/ 27 сентября 2019

Я пытаюсь создать в таблице начальной загрузки слот для рендеринга любого логического значения с помощью пользовательского компонента.

Итак, у меня есть простая таблица 

<b-table :items="items" :fields="columns" >

</b-table>

Теперь, еслия хочу визуализировать один столбец определенным образом, я должен использовать слот 

<template v-slot:cell(active)="data" >
    <my-component :item="data.item" />
</template>

И это работает, потому что я знаю, что active - логическое значение.

Я хотел бы обобщить это поведение, но я не могу использовать v-for в шаблонах и не могу использовать v-slot:cell(active), еслине по шаблону ... Идея состояла в том, чтобы создать массив со всеми моими логическими полями и выполнить итерации по нему ... но он не работает ..

Как-то так 

<template v-slot:cell(b)="data" v-for="b in booleanFields">
    <my-component :item="data.item[b]" />
</template>

1 Ответ

1 голос
/ 28 сентября 2019

Поскольку Vue поддерживает Динамические имена слотов , вы можете использовать переменные для установки имен слотов, используя синтаксис v-bind:[attributeName]="value".

Таким образом, вы можете сделать что-тонапример: 

<template v-slot:['cell(' + b + ')']="data" v-for="b in booleanFields">

Но использование кавычек там невозможно из-за ограничений динамического выражения аргумента .Таким образом, вам нужно будет создать вспомогательный метод для этого объединения.Итак: 

<template v-slot:[gomycell(b)]="data" v-for="b in booleanFields">

плюс 

methods: {
  gomycell(key) {
    return `cell(${key})`; // simple string interpolation
  }

Естественно, вы можете просто назвать метод gomycell как cell и использовать его как v-slot:[cell(b)]="data" (обратите внимание на [] s), но я оставил имя gomycell, чтобы в этом примере было понятнее, как называется метод, а что нет.

Демонстрация:

Вот небольшойДемонстрация демонстрации использования динамических имен слотов , это не b-table, но я думаю, что это достаточно хорошо, чтобы показать, что это возможно: 

Vue.component('my-table', {
  template: '#my-table',
})

new Vue({
  el: '#app',
  data: {
    booleanFields: [true, false]
  },
  methods: {
    gomycell(key) {
      return `cell(${key})`;
    }
  }
})
<script src="https://unpkg.com/vue"></script>

<div id="app">
  <my-table>
    <template v-slot:[gomycell(b)]="data" v-for="b in booleanFields">
      <h3>who? {{ data.is }}</h3>
    </template>
  </my-table>
</div>

<template id="my-table">
  <div>
    <div style="color:green"><slot name="cell(true)" v-bind="{is: 'true!'}"></slot></div>
    <div style="color:red"><slot name="cell(false)" v-bind="{is: 'false!'}"></slot></div>
  </div>
</template>
...