'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
-
It worked for me:
in .vue
<template v-slot:[getitemcontrols()]="props">in .js
methods: { getitemcontrols() { return `item.controls`; },讨论(0) -
I don't see any
v-slotin 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 }">讨论(0) -
For me this config added to package.json worked
"eslintConfig": { "root": true, "env": { "node": true }, "extends": [ "plugin:vue/base" ], "rules": {}, "parserOptions": { "parser": "babel-eslint" } }讨论(0) -
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.
讨论(0) -
Maybe this isn't the answer, and you also may not buy into my solution but this is what I did.
ANS: I downgraded Vetur to version 0.23! It worked! (Waiting a new version release that addresses the issue.
Open the Extensions side panel on VSCode, right click Vetur and select
install other versions.Alternatively, if your code is working fine, a line before the
vue-eslint-pluginerror you can try<!-- eslint-disable-next-line vue/no-v-html -->to disable eslint for next line or<!-- eslint-disable -->to disable every disable linting below it.Worked for some people but not for me and may not work for you. Either way, prefer Vetur downgrade
I am using laravel framework, and vuetify. Previous codes suddenly reported eslint errors with red lines - vue/valid-v-slot directive, adding multiple root nodes to the template, and so on without recommending any quick fix, yet they are all working fine. Answers I got from search never yielded any result till I downgraded, any other solution will be so welcomed!
讨论(0) -
For me the following Entry in settings.json fixed the problem:
"vetur.validation.template": false讨论(0)
加载中...
- 热议问题