Question

我正在使用vuetify的数据表，这是一个不同的插槽，例如下面的一些道具

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

我还使用vue的eslint插件检查任何错误/错误代码/或任何违规行为，但是如果我在文件中使用上述代码段，则会给我错误

'v-slot'指令不支持任何修饰符

根据本文档，https://eslint.vuejs.org/rules/valid-v-slot.html

但是它没有关于如何处理这种情况的任何示例

我如何删除此警告/或使其成为正确的方式，而不使其免除

谢谢

Answer 1

您提供的代码中没有看到任何v-slot，因此我只能向您展示用例。

出现Eslint错误：

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

没有错误：

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

Answer 2

在eslint-plugin-vue@^7.1.0中，您可以在allowModifiers规则中使用vue/valid-v-slot选项。

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

vue/valid-v-slot #options

Answer 3

编辑：正如评论和Hexodus的（正确）答案所通知的那样，您可以通过使用返回字符串（模板）的动态插槽名称来解决掉毛警告。不再建议“不启用”，因为这已成为标准规则。因此，我建议使用Hexodus的方法，而不是完全禁用有效的v槽规则。

原始帖子：

您无法真正解决此掉毛警告。

修饰符的Vue语法使用点来更改指令函数（例如v-model.number）
Vuetify动态命名其插槽的方式使用点来选择组件的特定部分（＃header.data-table-select）。

ESLint无法区分是要在插槽上设置修饰符（这是不可能的）还是您的插槽名称包含点。

您最容易做的就是禁用规则。由于eslint-plugin-vue的任何基本配置默认都不启用“ valid-v-slot”规则，因此您应该能够在eslint配置的“规则”下找到它。

Answer 4

对我有用：

在.vue中

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

.js

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

Answer 5

也许这不是答案，您也可能不认同我的解决方案，但这就是我所做的。

ANS：我将Vetur降级为0.23版！有效！（正在等待解决该问题的新版本。

打开VSCode上的Extensions侧面板，右键单击Vetur并选择install other versions。

或者，如果您的代码运行正常，则在vue-eslint-plugin错误之前的一行，您可以尝试禁用下一行的eslint或禁用其下的所有禁用lint。

为某些人工作，但不为我工作，可能对您不工作。无论哪种方式，都希望将Vetur降级

我正在使用laravel框架，并进行验证。先前的代码突然用红线报告eslint错误-vue / valid-v-slot指令，向模板添加了多个根节点，依此类推，而无需建议任何快速修复，但它们都可以正常工作。在我降级之前，我从搜索中获得的答案从未产生任何结果，否则任何其他解决方案都将受到欢迎！

Answer 6

对我来说，settings.json中的以下条目解决了该问题：

 "vetur.validation.template": false

Answer 7

对我来说，添加到package.json的配置有效

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

'v-slot'指令不支持任何修饰符

7 个答案: