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

我正在使用 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- 槽”指令不支持任何修饰符

根据这份文件，它是正确的 https://eslint.vuejs.org/rules/valid-v-slot.html

but it don't have any example to how we handle this case

我怎样才能删除这个警告/或使它正确的方式，而不使它豁免

Thanks

93392 次浏览
小开

编辑: 根据注释和 Hexodus’(正确)答案的通知，您可以使用返回字符串(模板)的动态槽名来解决 linting 警告。“不启用”不再被推荐，因为这现在是一个标准规则。因此，我建议使用 Hexodus 方法，而不是完全禁用有效的 v 槽规则。

原文:

你不能真正修复这个过滤警告。

  • 修饰符的 Vue 语法使用点来更改 directive functions (e.g. v-model.number)
  • Vuetify 动态命名插槽的方式使用一个点 选择组件的特定部分(# header. data-table-select)。

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

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

小开
最佳答案

I don't see any v-slot in the code you provided so I can show you only my usecase.

埃斯林特错误:

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

没有错误:

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

也许这不是答案，也许你也不相信我的解决方案，但这就是我所做的。

ANS: 我把 Vetur 降级到了0.23版! 成功了! (正在等待一个新版本来解决这个问题。

打开 VSCode 上的 Extensionsside 面板，右键单击 Vtur 并选择 install other versions。

Alternatively, if your code is working fine, a line before the vue-eslint-plugin error you can try <!-- eslint-disable-next-line vue/no-v-html --> to disable eslint for next line or <!-- eslint-disable --> to disable every disable linting below it.

对某些人有用，但对我没用，可能对你也没用。不管怎样，还是选择降级吧

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

小开

这对我很有效:

在

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

在

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

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

 "vetur.validation.template": false
小开

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

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

Vue/valid- v-slot # 选项

小开

对我来说，添加到 package.json 的这个配置起作用了

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

试试这个:

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

如果使用格式 Vetur，请在 vscode 设置中添加此选项:

"vetur.validation.template": false
小开

我尝试了 Hexodus 的答案，但在我的情况下，模板根本没有渲染。

我让它在没有修改埃斯林特规则的情况下完美运行:

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

提交答案