Template for custom data rendering with nested keys

Is your feature request related to a problem? Please describe…

I have a b-table component with item provider function. The provider function returns the items and a “fields” array:

fields: [
          { key: "id", label: "user id", sortable: true },
          { key: "attributes.name", label: "user name", sortable: true },
          { key: "attributes.createdAt", label: "created at", sortable: true },
          { key: "attributes.permissions", label: "permissions", sortable: true },
        ],

The keys of the table are often nested.

Now I would like to create a template for custom data rendering. I tried something like this:

<!-- A custom formatted column -->
      <template #cell(attributes.permissions)="data">
        <b-badge variant="primary" class="mr-3" v-for="permission in data.attributes.permissions" :key="permission">
          {{ permission }}
        </b-badge>
      </template>

But this does not work. I got the error message:

 [vue/valid-v-slot]
'v-slot' directive doesn't support any modifier.eslint-plugin-vue

Describe the solution you’d like

Is there a possibility that nested keys work with templates for custom data rendering?

Describe alternatives you’ve considered

I also tried something like this which also does not work:

<template v-slot:[`attributes.permissions`]="{ data }">
  <b-badge variant="primary" class="mr-3" v-for="permission in data.attributes.permissions" :key="permission">
   {{ permission }}
  </b-badge>
</template>

[Hiws]

What you’ve written is valid. (except the alternative as you’re missing cell() around your property path) However your linter is throwing a warning, and not an error. Which can stop your project from compiling. You’ll need to configure your linter to allow modifiers in v-slot, check the following links as to how.

https://eslint.vuejs.org/rules/valid-v-slot.html#vue-valid-v-slot https://eslint.vuejs.org/rules/valid-v-slot.html#options

[stale[bot]]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you!