vue中报错Do not use built-in or reserved HTML elements as component id details
原因是定义了一个叫做details的comonent
跟现有的html网页中的标签重合
export default {
name: 'details',
data () {
return {
equityBalance: this.item.equityData,
depositWithdraw: this.item.depositWithdraw,
symbol: 3,
//真实的出金记录
withdrawData: {},
//真实的入金记录
depositData: {}
};
}
}
组件,不能和html标签重复
details组件,h5新标签重复
由于在模板需要插入到 DOM 中,所以模板中的标签名必须能够被 DOM 正确地解析。主要有三种情况:
一是完全不合法的标签名,例如 </>;
二是与 HTML 元素重名会产生不确定的行为,例如使用 input 做组件名不会解析到自定义组件,使用 button 在 Chrome 上正常但在 IE 上不正常;
三是与 Vue 保留的 slot、partial、component 重名,因为会优先以本身的意义解析,从而产生非预期的结果。
解决办法:
办法1: 如果我们采用正确命名,并对应修改上述代码,将details改正,即可消除报错。
办法2: 也可以直接删除name 属性。
站在巨人的肩膀上摘苹果:
https://blog.csdn.net/qq_35393869/article/details/80364951
https://www.cnblogs.com/qingqingzou-143/p/7068514.html
vue中报错Do not use built-in or reserved HTML elements as component id details的更多相关文章
- vue 渲染是出现 Do not use built-in or reserved HTML elements as component id 的警告
情况1.是因为组件命名和引入不一致造成的. 命名组件(nav) export default { name: 'nav', data () { return { } } 引入组件(Navigation ...
- Do not use built-in or reserved HTML elements as component id:mask vue报错
今天学习了一下vue的组件,但是报了一个错误 Do not use built-in or reserved HTML elements as component id:mask , 经过查询得知是因 ...
- vue报错 Do not use built-in or reserved HTML elements as component id:header
组件,不能和html标签重复 header组件,h5新标签重复 Do not use built-in or reserved HTML elements as component id:header ...
- vue报错:[Vue warn]: Do not use built-in or reserved HTML elements as component id: header
报错的信息大致是不要将内置或保留的HTML元素用作组件ID 解决的办法是修改name符合规范或者直接删除组件内的name属性.
- vue Do not use built-in or reserved HTML elements as component id: nav
刚入坑vue 在新建组件的时候出现这个问题,原因是我新建的这个组件name: 'nav' 在vue中好像nav 这样的 有点类似于 “关键字” 不能作为组件的name,按照服务端来说 就是不可以命名关 ...
- Vue中出现Do not use built-in or reserved HTML elements as component id:footer等等vue warn问题
错误示图: 原因:是因为在本地项目对应文件的<script>中,属性name出现了错误的命名方式,导致浏览器控制台报错! 诸如: name: header . . name: menu ...
- [Vue warn]: Do not use built-in or reserved HTML elements as component id: content
错误如下: 报错原因: 不能使用内建标签,组件不能和html标签重复. 解决办法: 把name改成mContent解决.
- [Vue warn]: Do not use built-in or reserved HTML elements as component id: header
因为header在HTML5里面是个原生的标签,所以在开发的时候会提示错误,解决方法:修改components里面左边的header
- vue中报错Props with type Object/Array must use a factory function to return the default value
Invalid default value for prop "value": Props with type Object/Array must use a factory fu ...
随机推荐
- ubuntu “快捷方式”
1.创建.Desktop文件 sudo gedit /usr/share/applications/pycharm.desktop 2.建立pycharm.desktop [Desktop Entry ...
- Electron使用electron-packager打包记录
1.使用 JavaScript, HTML 和 CSS 构建跨平台的桌面应用 2.下载https://github.com/electron/electron-quick-start中的示例 3.在示 ...
- Mac 解决IDEA无法启动的问题
今天重装了IDEA,发现IDEA启动不了,点击IDEA无反应,使用命令行启动idea,然后看看具体的错误,具体的启动方案就是:打开finder->应用程序->idea.app->右键 ...
- JDK 1.8 完整日期时间Api (文末附示例)
一.背景 jdk 1.8 之前, Java 时间使用java.util.Date 和 java.util.Calendar 类. Date today = new Date(); System.out ...
- 项目SpringMVC+Spring+Mybatis 整合环境搭建(1)-> Spring+Mybatis搭建
目录结构 第一步:web.xml 先配置contextConfigLocation 对应的application-context.xml文件 打开webapp\WEB-INF\web.xml, 配置s ...
- discuz如何修改主题列表页增加最后发表用户调用
首页有点问题,我觉得摘要实在太长了,我调整了一下 <!--{if is_array($group['lastpost'])}--> <a href="forum.php?m ...
- C# 正则进阶
.NET 中的正则表达式是基于 Perl 5 的正则表达式. 超时 从 .NET Framework 4.5 开始,正则表达式支持在匹配操作中指定超时时间.如果匹配超时,就会抛出 RegexMatch ...
- docker nginx 实现图片预览
一.实现 nginx http图片预览 1.创建本地配置文件目录以及配置文件 两种方式: 1.1.docker nginx将配置文件抽离到了/etc/nginx/conf.d,只需要配置default ...
- [Python源码剖析]字符缓冲池intern机制
static PyStringObject *characters[UCHAR_MAX + 1]; ... /* This dictionary holds all interned strings. ...
- BZOJ 4556(后缀数组+主席树求前驱后继+二分||后缀数组+二分+可持久化线段树)
换markdown写了.. 题意: 给你一个1e5的字符串,1e5组询问,求\([l_1,r_1]\)的所有子串与\([l_2,r_2]\)的lcp 思路: 首先可以发现答案是具有单调性的,我们考虑二 ...