Bootstrap Vue表中的语法问题，其中PUG模板中具有作用域的插槽

Question

从Bootstrap Vue表文档中，可以呈现自定义的数据。

https://bootstrap-vue.org/docs/components/table#scoped-field-slots

该示例显示了以下模板：

<template v-slot:cell(index)="data">
  {{ data.index + 1 }}
</template>

我正在使用PUG作为模板语言，但在语法上遇到了一些麻烦。我找不到将上述示例“翻译”为PUG语法的正确方法。

由于冒号而无法使用：

template(v-slot:cell(index)="data") {{ data.index + 1 }}

而且这似乎也不正确：

template(v-slot(cell(index)="data")) {{ data.index + 1 }}

---

更新＃1

这是我的字段定义：

  fields: [
    "index",
    {
      key: "name",
      label: this.$t("document.name"),
      sortable: true
    }
  ]

这是模板：

b-table#filesList(
  v-if="list.length > 0"
  :items="list"
  :fields="fields"
  stacked="md"
  striped
  responsive
)
  template(v-slot:cell(index)="data") {{ data.index + 1 }}

这仅显示一个空的“索引”列。如果我将模板更改为默认的slot和slot-scope synctax，则它可以正常工作：

template(slot="index" slot-scope="data") {{ data.index + 1 }}

Answer 1

这是您提供的链接中代码示例的哈巴狗“翻译”。

我以前没有使用过哈巴狗，但是下面的代码看起来像在此codepen中正常工作。

由于需要虚拟字段，因此需要为fields上的fields属性提供b-table数组。这包括您要显示的所有字段。

b-table(small, :fields="fields", :items="items", responsive="sm")
  template(v-slot:cell(index)="data") {{ data.index + 1 }}

  template(v-slot:cell(name)="data")
    b.text-info {{ data.value.last.toUpperCase() }},
    b {{ data.value.first }}

  template(v-slot:cell(nameage)="data") {{ data.item.name.first }} is {{ data.item.age }} years old

  template(v-slot:cell()="data") 
    i {{ data.value }}