vue.js - 'v-slot' directive doesn't support any modifier

Question

I am using vuetify's datatable, i this we have different slots with some props for example below

<template  #header.data-table-select="{ on, props }">
    <v-simple-checkbox color="purple" v-bind="props" v-on="on"></v-simple-checkbox>
</template>

I am also using vue's eslint plugin to check for any errors/bad code / or any violation , but if i use above code snippet in my file it gives me error

'v-slot' directive doesn't support any modifier

as per this docs it is right https://eslint.vuejs.org/rules/valid-v-slot.html

but it don't have any example to how we handle this case

how can i remove this warning/or make it correct way , without making it exemption

Thanks

Answer 1

I don't see any v-slot in the code you provided so I can show you only my usecase.

With Eslint error:

<template v-slot:item.actions="{ item }">

Without error:

<template v-slot:[`item.actions`]="{ item }">