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

【问题标题】：'v-slot' directive doesn't support any modifier'v-slot' 指令不支持任何修饰符
【发布时间】：2020-08-04 06:50:06
【问题描述】：

我正在使用 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 插件来检查任何错误/错误代码/或任何违规，但是如果我在文件中使用上面的代码 sn-p 它会给我错误

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

根据这个文档是正确的https://eslint.vuejs.org/rules/valid-v-slot.html

但它没有任何关于我们如何处理这种情况的例子

我怎样才能删除此警告/或使其正确，而不使其豁免

谢谢

【问题讨论】：

标签： vue.js vuetify.js eslint

【解决方案1】：

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

出现 Eslint 错误：

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

没有错误：

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

【讨论】：

我的代码格式化程序不喜欢这种解决方法，它将其转换为 <template v-slot:[&#x60;item.actions&#x60;]="{ item }"> 有什么想法吗？
@Hexodus，'#' 是 'v-slot:' 的 Vue 快捷方式
对于像我这样在文档中寻找速记符号的人：vuejs.org/v2/guide/components-slots.html#Named-Slots-Shorthand
@DiegoGarcia 您可能正在使用 Vetur，您可以从它的设置中更改 vetur html 格式化程序。把它从 prettyhtml 改成更漂亮。
我不知道你能做到这一点！我们在几页上都有这些警告，这让我的强迫症更快乐。

【解决方案2】：

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

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

vue/valid-v-slot #options

【讨论】：

或者如果你有像我这样的 javascript 格式文件 (.eslintrc.js)，你可以添加： rules: { 'vue/valid-v-slot': [ 'error', { allowModifiers: true , }, ], },
这似乎不适用于我的设置、nuxtjs、vscode...
好像在安装Vetur的时候，在.eslintrc中无法禁用该规则。似乎丹尼尔施密特的答案就是解决方案。

【解决方案3】：

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

 "vetur.validation.template": false

【讨论】：

这也对我有用。显然，此错误源自 Vetur，其内置 eslint-plugin-vue 未引用项目 .eslintrc 。（取自gitmemory.com/issue/vuejs/eslint-plugin-vue/1269/668921391）
将此行添加到我的项目根目录中的 .vscode/settings.json 不起作用。为了让它工作，我必须去 File --> Preferences --> Extensions，选择 Vetur 扩展，点击它的设置，向下滚动找到“Edit in settings.json”并将该行添加到底部那个文件。无论出于何种原因，这是一个不同的文件，所以当我在那里添加它时它就起作用了。

【解决方案4】：

编辑：根据 cmets 和 Hexodus 的（正确）答案的通知，您可以使用返回字符串（模板）的动态槽名称来解决掉毛警告。不再推荐“不启用”，因为这是现在的标准规则。因此，我建议使用 Hexodus 的方法，而不是完全禁用有效的 v-slot 规则。

原帖：

您无法真正修复此 linting 警告。

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

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

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

【讨论】：

我不同意。正如@Hexodus 的回答所示，这个问题是可以解决的。
看起来现在默认启用此功能仅供参考

【解决方案5】：

试试这个：

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

如果你使用 vetur 格式，请在 vscode 设置中添加此选项：

"vetur.validation.template": false

【讨论】：

也适用于 Neovim！

【解决方案6】：

也许这不是答案，你也可能不接受我的解决方案，但这就是我所做的。

答：我将 Vetur 降级到 0.23 版！有效！（等待解决该问题的新版本。

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

或者，如果您的代码运行良好，您可以尝试 vue-eslint-plugin 错误之前的一行  为下一行禁用 eslint 或  禁用它下面的每个禁用 linting。

为某些人工作，但不为我工作，可能不适合你。无论哪种方式，更喜欢 Vetur 降级

我正在使用 laravel 框架和 vuetify。之前的代码突然报告了带有红线的 eslint 错误 - vue/valid-v-slot 指令，向模板添加多个根节点等等，没有推荐任何快速修复，但它们都工作正常。在我降级之前，我从搜索中得到的答案从未产生任何结果，任何其他解决方案都会受到欢迎！

【讨论】：

 是为我做的。
不敢相信我回来寻找自己的答案

【解决方案7】：

它对我有用：

在.vue中

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

在.js中

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

【讨论】：

在这种情况下你应该使用computed。在处理深层嵌套值（例如item.controls.user.devReports.ReportBug）时，这将是一个很好的解决方案

【解决方案8】：

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

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

【讨论】：