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

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

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

Solution 2:

In eslint-plugin-vue@^7.1.0, you can use allowModifiers option in vue/valid-v-slot rule.

// .eslintrc.js
'vue/valid-v-slot': ['error', {
  allowModifiers: true,
}],

vue/valid-v-slot #options

Solution 3:

For me the following Entry in settings.json fixed the problem:

 "vetur.validation.template": false

Solution 4:

EDIT: As notified by the comments and Hexodus' (correct) answer, you can work around the linting warning by using dynamic slot names that return a string(template). 'Not enabling' is no longer recommended, as this is now a standard rule. Thus, I recommend using Hexodus' method over disabling the valid v-slot rule altogether.

Original Post:

You can't really fix this linting warning.

• Vue syntax for modifiers use the dot to alter the way a directive functions (e.g. v-model.number)
• The way Vuetify dynamically names their slots uses a dot in order to select a specific part of the component (#header.data-table-select).

ESLint can't distinguish whether you're trying to set a modifier on a slot (which is impossible), or if you have a slot name that contains a dot.

The easiest thing you can do is disable the rule. Since the 'valid-v-slot' rule isn't enabled by default by any of the base configurations of eslint-plugin-vue, you should be able to find it under "rules" in your eslint config.