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

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

出现 Eslint 错误：

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

没有错误：

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

---

在 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

---

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

 "vetur.validation.template": false

---

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

原帖：

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

修饰符的 Vue 语法使用点来改变指令的运行方式（例如 v-model.number）

Vuetify 动态命名其插槽的方式使用点来选择组件的特定部分（#header.data-table-select）。

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

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

---

我尝试了 Hexodus 的回答，但在我的情况下，模板根本没有呈现。

我让它完美地工作，没有任何 eslint 规则修改：

<template #[`item.actions`]="{ item }">

---

尝试这个：

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

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

"vetur.validation.template": false

---

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

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

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

或者，如果您的代码工作正常，您可以尝试 <!-- eslint-disable-next-line vue/no-v-html --> 为下一行禁用 eslint 或 <!-- eslint-disable --> 以禁用它下面的每个禁用 linting 之前的一行。

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

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

---

它对我有用：

在.vue

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

在 .js 中

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

---

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

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

---