динамический цикл в свойстве атрибута шаблона

Question

Я пытаюсь создать шаблон, который повторяется для стольких элементов в объекте данных. Однако, согласно Квазару, мне нужно свойство v-slot, предназначенное для строки таблицы, и я оцифровал строки, чтобы помочь мне достичь этого. Проблема в том, что мне нужно прочитать этот v-слот динамически. Мне трудно объяснить это, поэтому позвольте мне показать вам:

Синтаксис таблицы квазаров выглядит следующим образом:

<q-table :data="allLockbox" :columns="columns" row-key="name">
  <template v-slot:body-cell-1="props">
    <q-td :props="props">
      <p>
        This is row 1
      </p>
    </q-td>
  </template>
  <template v-slot:body-cell-2="props">
    <q-td :props="props">
      <p>
        This is row 2
      </p>
    </q-td>
  </template>
  <template v-slot:body-cell-3="props">
    <q-td :props="props">
      <p>
        This is row 3
      </p>
    </q-td>
  </template>
  ... ... ...
  <template v-slot:body-cell-nth="props">
    <q-td :props="props">
      <p>
        This is row nth
      </p>
    </q-td>
  </template>
</q-table>

Данные имеют массив с таким количеством строк, сколько можетбыть, например:

worktransfers: ["1", "2", "3", "4", "5", "6", "7"]

В идеале, я хотел бы запустить v-for для циклического перемещения по массиву и создания 7 шаблонов в этом случае. Документация VueJS позволяет использовать v-for в шаблонах без ключа (что также создает ошибку в цикле, но пока что). Моя проблема ... Как я могу сделать v-slot cell name динамическим, чтобы он отображал имя ячейки в соответствии с индексом цикла? ... Я пробовал это:

<template v-for="(worktransfer, index) in worktransfers" v-slot:body-cell-{{index}}="props">

, а также строковый литерал

<template v-for="(worktransfer, index) in worktransfers" `v-slot:body-cell-${{index}}`="props">

Ни то, ни другое не работает. Как мне сделать это имя ячейки динамическим для данных, чтобы оно зацикливало шаблон как body-cell-1, body-cell-2, body-cell-3 и т. Д ...?

Answer 1

Документация re. динамические имена слотов здесь

https://vuejs.org/v2/guide/components-slots.html#Dynamic-Slot-Names

два требования

• vue 2.6.0 +
• использование [] скобки: v-slot:[dynamicSlotName]

Как отметил @Ricky в своем комментарии, это должно сработать

  <template v-slot:['body-cell-'+index]="props">
    <q-td :props="props">
      <p>
        This is row {{index}}
      </p>
    </q-td>
  </template>

update

здесь jsfiddle, показывающий динамическое именование компонентов, работающее https://jsfiddle.net/dapo/mLe4v8j7/

код:

Vue.component('parent', {
  template: `<div class="parent">
        <h4>Parent Component</h4>
        
        <h3>computed</h3>
    		<child>
          <template v-for="(item, i) in slotNamesDynamic" v-slot:[item]="props">
            <p>computed {{props.text}}</p>
          </template>
        </child>
        
        <h3>dynamic</h3>
    		<child>
          <template v-for="(item, i) in slotNames" v-slot:['body-cell-'+item]="props">
            <p>dynamic {{props.text}}</p>
          </template>
        </child>
        
        <h3>function</h3>
    		<child>
          <template v-for="(item, i) in slotNames" v-slot:[slotname(item)]="props">
            <p>function {{props.text}}</p>
          </template>
        </child>
        
      </div>
    `,
  props: ['slotNames'],
  computed: {
    slotNamesDynamic() {
      return (this.slotNames || []).map(n => 'body-cell-' + n)
    }
  },
  methods: {
    slotname(id) {
      return 'body-cell-' + id
    }
  }
});

Vue.component('child', {
  template: `
      <div class="child">
        <h4>Child Component</h4>
        <slot name="body-cell-0" text="component slot 'body-cell-0'">1
        </slot>
        <slot name="body-cell-1" text="component slot 'body-cell-1'">2
        </slot>
        <slot name="body-cell-2" text="component slot 'body-cell-2'">3
        </slot>
      </div>`,
});

new Vue({
  el: '#app',
  data: {
    slotNames: ["0", "1", "2"]
  }
})

.child{
  border: 1px solid #999;
  margin: 0 0 0 2em;
  padding: 1em;
  display: inline-block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.0/vue.js"></script>
<div id="app">
  <parent :slot-names="slotNames"></parent>
</div>