Sometimes, we want to fix the "’v-slot’ directive doesn’t support any modifier" ESLint error in Vue.js.
In this article, we’ll look at how to fix the "’v-slot’ directive doesn’t support any modifier" ESLint error in Vue.js.
How to fix the "’v-slot’ directive doesn’t support any modifier" ESLint error in Vue.js?
To fix the "’v-slot’ directive doesn’t support any modifier" ESLint error in Vue.js, we wrap our slot name with periods in the name with backticks.
For instance, we write
<template>
<template v-slot:[`item.actions`]="{ item }"> ... </template>
</template>
to add the item.actions slot with v-slot:[item.actions] to avoid having the "’v-slot’ directive doesn’t support any modifier" being thrown when we use ESLint in our Vue CLI project.
Conclusion
To fix the "’v-slot’ directive doesn’t support any modifier" ESLint error in Vue.js, we wrap our slot name with periods in the name with backticks.
