模板属性中的动态循环

Question

我正在尝试为数据对象中的多个项目创建一个重复的模板。但是，根据 Quasar 的说法，我需要一个针对表格行的 v-slot 属性，并且我已经对这些行进行了编号以帮助我实现这一目标。问题是，我需要动态读取那个 v-slot。我很难解释这一点，所以让我告诉你：

Quasar 表语法如下所示：

<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

文档重新。动态插槽名称在这里

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>

更新

这是一个显示动态组件命名工作的 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>