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

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 的答案，但在我的情况下模板根本没有渲染。

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

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

Answer 4

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

原帖：

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

• 修饰符的 Vue 语法使用点来改变指令的功能（例如 v-model.number）
• Vuetify 动态命名它们的插槽的方式使用一个点来选择组件的特定部分（#header.data-table-select）。

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

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

Answer 5

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

 "vetur.validation.template": false