'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

回答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 }">

回答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

回答3:

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.

回答4:

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

 "vetur.validation.template": false

回答5:

It worked for me:

in .vue

<template v-slot:[getitemcontrols()]="props">

in .js

 methods: {
    getitemcontrols() {
      return `item.controls`;
    },

回答6:

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-plugin error you can try  to disable eslint for next line or  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!

回答7:

For me this config added to package.json worked

"eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/base"
    ],
    "rules": {},
    "parserOptions": {
      "parser": "babel-eslint"
    }
  }

来源：https://stackoverflow.com/questions/61344980/v-slot-directive-doesnt-support-any-modifier

标签

Vue.js

vuetify.js

eslint