“Cannot read properties of null(reading ‘parentNode‘)vue3运行报错 引入element-plus库

于 2024-03-31 22:29:50 发布
阅读量1.1k 收藏 13
点赞数 9
文章标签： vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/luciyana/article/details/137211352
版权
本文讲述了作者作为前端新手初次使用ElementPlus遇到的引用错误，分享了解决步骤，包括未加入库引用的错误原因，以及从Vue2切换到Vue3项目的注意事项。
摘要由CSDN通过智能技术生成

本人刚刚开始接触前端，记录一下遇到的问题，希望可以帮助到你！

点击运行的时候报错，原因是：

里面使用到了element-plus库的组件，但是没有加入引用，所以报错

（注意，之前新生成vue项目的时候，跟着网上教程选的配置，但是要注意如果用element-ui的话就要使用vue2，vue3配套的是element-plus，所以是重新生成vue3项目再搬运，走了很多弯路，不过新手都正常啦）

要引入element-plus可以去官网找安装教程安装 | Element Plus (element-plus.org)

这里推荐使用 

npm install element-plus --save

然后不要忘记在main.js中加入引用哦

然后再直接运行npm run serve

就发现可以啦，耶耶耶！

不过我的表达不太标准，因为非常外行，欢迎大家批评指正啦！

mhggdlp
关注
  • 9
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue3 - element plus 报错 TypeError: Cannot read properties of null (reading ‘emitsOptions‘)，使用组件报错详细解决
高级前端工程师
06-12 3817
vue3，elementPlus，TypeError: Cannot read properties of null (reading 'emitsOptions')，TypeError: Cannot read properties of null (reading 'insertBefore')，vue3使用element-plus中el-table组件报错关键字'emitsOptions'与'insertBefore'分析，在本地运行的时候一点错误也没有，但是打包后放到线上环境就开始报错，vue3报错
vue 3.0 keep-alive 失效 报错 Cannot read properties of null (reading ‘parentNode‘)
susanliy的博客
12-07 5681
版本： vue “3.2.4” vue-loader “16.4.1” vue-router “4.0.11” <router-view v-slot="{ Component }"> <keep-alive> <suspense timeout="0"> <template #default> <component :is="Component" />
vue3 router配置有关parent报null 的错误问题
lishishi521的博客
11-04 4736
vue3 router配置有关parent报null 的错误问题
vue中集成jsplumb报错`Cannot read property ‘parentNode‘ of null`，且无法渲染连线的问题
weixin_41102672的博客
10-31 9873
简介 我在项目中使用了typescript+vue+jsplumb作为流程图框架。 问题 我在容器中使用的是v-for指令渲染。从配置文件中读取流程图的json并且存入this.items变量中，通过v-for指令渲染一系列组件。 代码： mounted(){ this.items = JSON.parse(JSON.stringify(demoGraph)); // 这里的nextTick的作用是，this.items已经被更新，可是DOM还没有发生更新。 // jsplumb是通过访问do
TypeError: Cannot read properties of null (reading ‘parentNode‘) vue3踩坑
热门推荐
weixin_57997644的博客
05-03 1万+
则用Object.assign(a, b)，第一个a是被赋值的，第二个是有数据的。如上图，我赋值的为一个对象，直接这样写就会报上面第一张图的错误。有关Object.assign()的知识可点击。解决方法二：如果用的是reactive。改正：将ref()改成ref({})
element el-select Cannot read properties of null (reading ‘parentNode‘)错误
qq_15903703的博客
10-09 9073
需要定义一个ID_INJECTION_KEY给后续组件使用，引用element-plus修改如下。
Cannot read properties of null (reading ‘parentNode‘) TypeError: Cannot read
weixin_57975082的博客
07-27 1111
在声明reactive数据时，axios获取到的数据一般是对象，需要转为数组才能使用，自学太难了，容易踩坑，菜鸡QAQ。
element-ui tree结构实现增删改自定义功能代码
10-14
Element-UI是一个基于Vue.js的开源UI组件库，它提供了丰富的组件供开发者使用，其中包括Tree组件，用于展示层级关系的数据。在描述的场景中，我们需要在Tree组件的基础上增加编辑、删除和新增节点的功能。 首先，...
Element-ui el-tree新增和删除节点后如何刷新tree的实例
10-14
在Element-ui中，`el-tree`是一个非常常用的组件，用于展示层级关系的数据。在实际开发过程中，我们常常需要动态地新增或删除树形结构中的节点，并确保这些操作后树能够正确地更新显示。本文将详细讲解如何在Element...
Element的el-tree控件后台数据结构的生成以及方法的抽取
10-15
Element的el-tree控件是基于Vue.js的前端组件库Element UI中的一个强大功能，用于展示层次结构的数据，如目录、组织架构等。el-tree控件的后台数据结构生成和方法抽取是实现动态加载、异步数据加载以及树状数据操作...
Vue 实现对quill-editor组件中的工具栏添加title
11-19
在Vue中，我们经常使用富文本编辑器如quill-editor来提供用户友好的文本编辑功能。然而，quill-editor默认的工具栏按钮都是英文标识，对于一些非英语环境的用户来说，这可能会造成一定的困扰。为了解决这个问题，...
Create-element-JS:Criaçaõde Elementos Com JS
03-12
`Create-element-JS`这个主题专注于使用JavaScript来创建DOM（文档对象模型）元素。DOM是HTML和XML文档的编程接口，它允许我们通过JavaScript与网页内容进行交互，包括创建、修改和删除元素。 在JavaScript中，有几...
Vue3 TypeError: Cannot read properties of null
init_yanxiao的博客
04-20 768
缺少emit绑定的事件，导致双向绑定失败，v-model写成v-modle 写错字。
Element-UI级联选择器el-cascader报错 “TypeError: Cannot read properties of null (reading ‘level‘)“
weixin_45466389的博客
06-13 1309
解决办法1：和网上大多数方法一样，给el-cascader加key，改变options时给key递增但是我使用场景将el-form封装了，key是一次性获取的，没办法用这种场景。1.发现报错原因是options变化时，activePath未清空导致获取到的nodes为[null]然后报错。2.那我们的目的就是要把activePath清空 ，全局搜activePath，找哪个方法可以把它清空。就这俩地方，所以报错问题所在就是我们要先清空value再变化options。解决办法2：进入elementui源码。
vue3 Cannot read properties of null (reading ‘$el‘) 报错问题解决
dxl99的博客
08-08 1304
此段报错是因为在created钩子中为创建组件实例,所以将操作放到onMounted中即可解决此报错!
vue3+elementplus 报错Uncaught TypeError: Cannot read properties of null (reading ‘offsetHeight‘)
weixin_73570155的博客
07-14 1150
由于错误似乎源于“element-plus”库的内部（特别是“style-helper.ts”文件），“element+plus”版本可能存在问题，更新依赖项：确保您使用的是最新版本的“element-plus”和“vue”。某些错误可能已在较新版本中修复。但是不影响正常逻辑使用，和渲染显示数据，就是控制台报红很不舒服，于是我在百度里面，挖呀挖呀挖，终于找到原因。el-table渲染时报错，
解决vue3 router配置有关parent报null 的错误问题
最新发布
m0_61230908的博客
10-10 538
今天在构建项目的时候的问题，在使用vue create 成功构建项目后使用的 使用的vue-router 报了新的问题：Uncaught TypeError: Cannot read properties of null (reading 'parent') 经过查找发现并没有问题，搜索了许多也没有发现好的解决方案，最后偶然发现package.json中并没有安装上router的依赖 重新安装下路由就可以。
Uncaught TypeError: Cannot read properties of null (reading ‘name‘) 和NoSuchMethodException
weixin_51485547的博客
01-04 8891
方法1：看idea控制台才发现是方法权限问题，把protected改为public即可。方法2：把getMethod()改为getDeclareMethod()并进行暴力反射。分析：这是由于还没登录，data.name 还没获取到值，所以为null。还有一个问题是缺少了js/angular.min.js文件，可以到官网。方法1：可以不管，它不会影响其他功能，当你登录后，便不会报这个错。修改完后记得先清楚浏览器缓存（或换个浏览器）再测试。方法2：给它一个if判断是否为null。
cannot read properties of null(reading appendChild)解决办法
sebeefe的博客
03-08 7379
项目场景： 本来写的是一个js渲染，但是出了个小问题，cannot read properties of null(reading appendChild)报错。大致意思是：不能读取空的属性。 let data = [ {img:"./img/OIP-C.jfif",id:13,name:'黄焖鸡米饭',订餐电话:13782721148,均价:'均价11元'}, {img:"./img/OIP-C.jfif",id:12,name:'胡辣汤',订餐电话:15188811571,均价:'均价3元'}
vue 3 Cannot read properties of null (reading 'parentNode') 去除报错
05-26
这个报错通常是因为在 Vue 3 中，某些操作在组件没有挂载时就被执行了，导致了找不到父节点的错误。可以尝试以下几种方法来处理这个问题： 1. 在操作前判断父节点是否存在。例如： ``` if (this.$el.parentNode) { // 执行操作 } ``` 2. 使用 `v-if` 指令来确保组件已经被挂载。例如： ``` <template> <div v-if="isMounted"> <!-- 组件内容 --> </div> </template> <script> export default { data() { return { isMounted: false } }, mounted() { this.isMounted = true } } </script> ``` 3. 使用 `nextTick` 方法来确保下一次 DOM 更新后再执行操作。例如： ``` this.$nextTick(() => { // 执行操作 }) ``` 希望以上方法能够帮助你解决问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值