vue编写报错‘v-slot‘ directive doesn‘t support any modifier.

已于 2023-05-31 11:43:59 修改
阅读量1.3k 收藏 1
点赞数
分类专栏： 前端 文章标签： vue.js 前端 javascript
于 2022-08-23 16:45:27 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41662255/article/details/126488001
版权
本文介绍了在Vue中遇到v-slot不支持修饰符的错误，提供了一个错误示例及解决方法。通过将修饰符`item.Operation`改为字符串`[`item.Operation`]`，可以避免eslint报错，确保模板正确编译。对于遇到类似问题的开发者，这是一个有效的解决方案。
摘要由CSDN通过智能技术生成

报错截图
在这里插入图片描述
这个报错是说，v-slot 不支持任何修饰符，编写语法不支持
错误示例：

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

这个 item.Operation 就是修饰符
把它修改为字符串

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

这样编译器就不会报错了，应该是 eslint 引起的问题～

感谢观看，希望对读者有所帮助，有疑问可以评论，不定时回复

blog-xiaoh
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
‘v-slot‘ directive doesn‘t support any modifier
左不言的博客
08-18 1493
这个报错是说，v-slot 不支持任何修饰符意思是不让你这样写这个 xxx 就是修饰符它只允许你这样写。
vue elementUI 使用slot-scope报错（版本升级）
01-20
vue里面使用element-ui表格组件时候报错 slot-scope未定义。 原创文章 20获赞 9访问量 7105 关注 私信 展开阅读全文 作者：hi 宋
＜template slot-scope=“scope“ ＞ 报错怎么解决
zz0567的博客
02-28 1729
<template slot-scope="scope" > 报错怎么解决
vue报错：element不兼容v-solt 报Analyzer will use module sizes from stats file
weixin_45270094的博客
04-26 7790
在vue中引入vue-table-with-tree-grid出现v-slot报错 错误代码： <template slot="isok" v-slot="scope"> <i class="el-icon-success" v-if="scope.row.cat_deleted===false"></i> ...
关于v-slot的一些学习笔记
Caoyh_Demo的博客
04-29 935
关于v-slot的一些学习笔记使用slot时遇到的问题描述错误的操作过程v-slot的使用 使用slot时遇到的问题描述 错误的操作过程 因为项目创建的时候使用的是vue3.0的方法创建的，当时想要在使用子组件中使用slot插槽，按照2.0的办法正常进行操作，npm run serve 启动项目的时候结果就报错了， [vue/no-deprecated-slot-attribute] slot attributes are deprecated. 查看资料发现2.6之后好像就把这个使用给废弃了，vue3
vuejs-sticky-directive:Vue指令支持基于纯js和vue的顶部和底部粘滞基
04-27
npm install vue-sticky-directive --save ES2015 // register globally import Sticky from 'vuejs-sticky-directive' Vue . use ( Sticky ) // or for a single instance import Sticky from 'vuejs-sticky-...
vue 插槽 (v-slot)
最新发布
08-31
vue 插槽 (v-slot)
详解vue2.6插槽更新v-slot用法总结
10-17
在 2.6.0 中，我们为具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令)。这篇文章主要介绍了详解vue2.6插槽更新v-slot用法总结，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
mirrors-draggable-vue-directive-master.zip
06-12
1.npm install draggable-vue-directive --save 2.<div v-draggable> classic draggable 3. import { Draggable } from 'draggable-vue-directive' ... export default { directives: { Draggable, }, ... 4...
Vue学习12--插槽
weixin_45048086的博客
10-29 617
Vue学习12–插槽 什么是插槽 插槽是子组件提供给父组件使用的一个占位符，用，父组件可以在这个占位符中填充任何模板代码，如HTML，组件等，填充的内容会替换子组件中的slot标签。相当于在子组件中放置了一个占位符，父组件传递进来的html片段会被加载到这个占位符的地方。 ​ 简单理解就是，在子组件内占坑，在父组件里填坑。 放在组件元素之间的html片段会被插槽占位符进行加载。 ​ 插槽如何使用 1、在子组件中使用插槽组件 指定插槽的名字： 2、使用方：在父组件引入的子组件元素之间直接添加需要传递的html
vue 插槽
qq_41722795的博客
09-02 278
动态插槽名 使用官网示例动态插槽名的报错 目录 动态插槽名 一、使用官网动态插槽名 报错 二、解决办法 避免使用大写命名 一、使用官网动态插槽名 报错 vue.js:634 [Vue warn]: Property or method "dynamicslotname" is not defined on the instance but referenced during render. Make sure that this property is reactive, .
vue3 插槽 slot
guizi0809的博客
07-03 1642
插槽内容 <!-- 父组件 --> <child-component> you can add something here. </child-component> <!-- 子组件 child-component.vue --> <div> <h1>I'm child component</h1> <slot></slot> </div> 当子组件渲染的时候，
vue2 插槽：slot，slot-scoped，v-slot
letianxf的博客
12-23 3000
vue2 插槽：slot，slot-scoped，v-slot。匿名插槽，具名插槽，作用域插槽
vue.2.2.1版本
weshouldhelp的博客
10-29 5532
/*! *转载自https://unpkg.com/vue@2.2.1/dist/vue.js * Vue.js v2.2.1 * (c) 2014-2017 Evan You * Released under the MIT License. */ (function (global, factory) { typeof exports === 'object' &amp;&...
Vue中的v-slot详解，作用域插槽和具名插槽
热门推荐
liushijun_的博客
06-15 8万+
1、具名插槽 有时候我们希望在指定的位置输出我们的子元素，这时候具名插槽就排上了用场。 //组件调用时 <MyFooter v-red :age.sync="age"> <template v-slot:footer> //这里v-slot：后边的值与组件内的slot的name属性对应，也就是插槽的名称。 <div>list</div&...
vue报错: [eslint-plugin-vue] [vue/valid-v-for] [vue/no-parsing-error]
票票的博客
07-08 3331
具体报错信息： [vue/valid-v-on] Avoid using JavaScript keyword as "v-on" value: "handleSearchTable".eslint-plugin-vue [vue/no-parsing-error] Parsing error: control-character-in-input-stream.eslint-plugin-vue [vue/no-parsing-error] Parsing error: Unexpected cha
v-slot的使用与详解
weixin_44790314的博客
01-13 4万+
关于v-slot指令的详细了解 相对于v-slot指令，对大家来说都应该不是很陌生，在 2.6.0 中，vue为具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令)。它取代了 slot 和 slot-scope 在新版中的应用，当然vue官方暂时还木有删除老版本中具名插槽和作用域插槽的和 slot-scope，也就是说，还可以用，但是不推荐，在vue-cli 3.0将不能使用 具名插槽新的改变 关于v-slot的指令，可以让我们不用再写过多的代码就可以做出slot具名插槽和slot-sc
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值