Syntax problem in Bootstrap Vue table with scoped slot in PUG template

Question

From the Bootstrap Vue table documentation it is possible to render data customized.

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

The example shows the following template:

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

I'm using PUG as a template language and I'm having some trouble with its syntax. I didn't find the correct way to "translate" the above example to PUG syntax.

This doesn't work because of the colon:

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

Also this does not seem to be correct:

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

Update #1

This is my field definition:

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

And this is the template:

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 }}

This only shows an empty "Index" column. If I change the template to the deprected slot and slot-scope synctax it's working:

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

Are you using Bootstrap-Vue version 2.0.0-rc.x? It has a different syntax than the current version for table slots. v-slot also requires vue v2.6.x, so make sure you have that installed. — Hiws
We're using "bootstrap-vue": "^2.0.0-rc.20","vue": "^2.6.6" — Robert Strauch
You're right. Thanks! I locally upgraded to the Bootstrap Vue 2.14.0 and now it's just working :-) — Robert Strauch

Hiws Hiws · Accepted Answer · 2020-05-12T08:18:47

Here's the pug "translation" of the code example in the link you provided.

I haven't used pug before, but the code below looks like it's working in this codepen.

Since you need virtual fields, you need to provide a fields array to the fields prop on b-table. That includes all the fields you want to show.

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 }}

Update

The above syntax requires Bootstrap version 2.0.0 and up.

The table slot naming for 2.0.0-rc.28 (and ONLY this version). was [field], HEAD[field] and FOOT[field].

In version 2.0.0-rc.27 and below it's field, HEAD_field, FOOT_field.

If you're using a version below that, i would suggest you update if you can, to get the latest features and fixes. But if you can't, you can instead clone the github repo and generate the documentation for the version you're using. This will allow you to see what is available at the time, and avoid future confusion.

Syntax problem in Bootstrap Vue table with scoped slot in PUG template

Update #1

1 Answers

Update