element-ui. Cascader Cannot read properties of null (reading ‘level‘) 出现异常

最新推荐文章于 2023-11-09 15:56:21 发布
最新推荐文章于 2023-11-09 15:56:21 发布
阅读量843 收藏
点赞数
分类专栏： 错误笔记 文章标签： vue.js elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44994494/article/details/125332146
版权

项目的前提是重复使用Cascader这个组件出现问题

错误

在这里插入图片描述

原因

因为重复渲染同一个组件 重复的给一个组件的options 进行赋值。会出现第一次的效果是正确的。但是后面的就出现效果偏差。报错。
在这里插入图片描述

解决

增加一个key 当作表示 在进行新options赋值就进行新增操作
在这里插入图片描述
data 里面默认值为零
在这里插入图片描述
进行监听

  watch: {
    config: {
      handler() {
        this.cascaderIdx++;
      },
      deep: true,
    },
  },

在这里插入图片描述
进行key值的修改操作
在这里插入图片描述
完美解决

变成派大星
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
element-ui.rar element-ui核心库压缩包
12-20
这个“element-ui.rar”压缩包包含了 Element UI 的核心库，是开发人员快速搭建企业级 Web 应用的重要工具。 Element UI 的设计理念是简洁、易用，它的组件设计遵循 Material Design 规范，同时考虑到国内用户的...
element-ui-2.15.6.zip
02-23
在给定的 "element-ui-2.15.6.zip" 文件中，我们可以找到构建和运行 Element UI 应用程序所需的所有资源。 1. **版本信息**：文件名 "element-ui-2.15.6" 表明这是 Element UI 的 2.15.6 版本。每个版本都可能包含...
Element-UI级联选择器el-cascader报错 “TypeError: Cannot read properties of null (reading ‘level‘)“
weixin_45466389的博客
06-13 1239
解决办法1：和网上大多数方法一样，给el-cascader加key，改变options时给key递增但是我使用场景将el-form封装了，key是一次性获取的，没办法用这种场景。1.发现报错原因是options变化时，activePath未清空导致获取到的nodes为[null]然后报错。2.那我们的目的就是要把activePath清空 ，全局搜activePath，找哪个方法可以把它清空。就这俩地方，所以报错问题所在就是我们要先清空value再变化options。解决办法2：进入elementui源码。
使用elementUI的el-cascader“ 报错 TypeError: Cannot read property ‘level‘ of null“，终于解决了
zhang54121的博客
11-16 1586
在封装 el-cascader后，数据回显后报错 解决方法如下： 1. 在回显时将options 设置为空即可（适用于多个级联选择器的回显），代码为： self.$refs.area.options = []（获取子组件的options，设置为空） 2. 设置 :key='cascaderId', 在获取数据后 设置 ++this.cascaderId(适用于单个选择器) ...
【vue】Cannot read property ‘level‘ of null“
Meditation_Crazy
03-02 418
前言 报错信息如下： Cannot read property ‘level’ of null" 参考文档： https://blog.csdn.net/qq_37253540/article/details/100730223 看到上面这个文章的描述，我想到了以前看过的组件销毁重置相关的文章： https://blog.csdn.net/s1441101265/article/details/110433805 然后根据逻辑，给el-cascader组件加了个v-if 判断，就解决了 ...
TypeError: Cannot read properties of null (reading ‘level‘)
最新发布
SunshineGGB的博客
11-09 1335
1、一个下拉框组件的更新由另一个下拉框组件控制被动更新列表，子级下拉框的值是由父级下拉框的值调用接口获取，每次父级下拉框值的改变都会改变子级下拉框的数据源也就是会改变子级下拉框的options，切换后之前的父级节点找不到就会报了这个错，父级节点不改变(即不切换)的话不会报错
el-cascader报错TypeError Cannot read properties of null (reading ‘level‘)
m0_67401746的博客
03-08 1348
具体是把el-cascader封装到自己的组件里，然后在使用这个自己封装的组件时发现以下错误，不影响使用，只是控制台报错。我是在一个vue文件中反复使用了这个组件。 估计问题是出现在 el-cascader 的反复渲染上，没关系，为每个级联选择器加个key 1.每次组件渲染时 手动传入个index，发现不行 2.直接在组件里给个key，在data里面设置初始值为0 当config数据发生变化时，监听改变这个key值， 齐活，收工！ ...
element - - - - - el-cascader组件报错 Cannot read properties of null (reading ‘level‘)
Dark_programmer的博客
02-03 1825
el-cascader组件报错 Cannot read properties of null (reading 'level')
ror in callback for watcher “options“: “TypeError: Cannot read properties of null (reading ‘level‘)“
LJJONESEED的博客
04-19 783
【代码】ror in callback for watcher “options“: “TypeError: Cannot read properties of null (reading ‘level‘)“
错误解决：Uncaught TypeError: Cannot read properties of null (reading ‘XXX‘).
m0_56426418的博客
04-16 1万+
我想既然显示 username 中的值为 null 就说明 session 大概率没有保存用户登录后的信息，既然没有信息那么大概率与控制层有关。当编写完接口中的方法，实现类中进行实现的时候，个人往往喜欢通过快捷方式重写实现接口中的方法，而这时加载出的方法默认会返回 null。报错意思大概就是你需要的这个 “username” 属性的值本来就是空的，所以无法获取到它的值。这里的目的是打开特定页面后，自动将用户登录后 session 中保存的 username 取出并将值赋给<input>标签。
解决一次Cannot read properties of null (reading ‘length‘)的问题：
qq_54604475的博客
05-30 2万+
本次为编写学校课时设计仿qq聊天的题目而编写代码，在学习大佬代码的过程中发现在自己电脑上启动服务器端的时候出现了一个有意思的问题。 大佬博客链接奉上： WebSocket之仿QQWeb即时聊天系统(上)_榕林子的博客-CSDN博客_web即时聊天 WebSocket之仿QQWeb即时聊天系统(下)_榕林子的博客-CSDN博客_仿qq聊天系统 一、错误原因： TypeError: Cannot read properties of null (reading 'length') at D:\..
element-ui 2.15.14版本
10-09
Element UI 是一个基于 Vue.js 的开源前端组件库，版本号 2.15.14 表示这是它的一个特定更新版本。这个版本可能包含了错误修复、性能优化、新功能添加或者对现有组件的改进。Element UI 提供了一系列美观、易用且...
element-ui.min
11-13
element-ui压缩后的版本，配合vue使用，不需要自己编译了
element-ui离线包.zip
01-13
2. **JavaScript 文件**：这是 Element UI 的核心功能文件，通常有 `.js` 和 `.min.js` 两种形式，如 `element-ui.js` 和 `element-ui.min.js`。JavaScript 文件包含了所有组件的逻辑代码，用于处理用户交互、状态...
Cannot read properties of null (reading ‘ xxx ‘ )的解决
热门推荐
weixin_48104862的博客
08-11 6万+
根据getElementById 的属性知道，他读到的是html中 标签的id ，此处报错说明我没有这个名为 tno 的Id ,所以根据这里我发现我在所需要的绑定标签中，给他的id = "type "
cannot read properties of null(reading appendChild)解决办法
sebeefe的博客
03-08 7301
项目场景： 本来写的是一个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元'}
el-cascader报错TypeError: Cannot read properties of null (reading ‘level‘)
在下魔王ii的博客
10-28 1万+
具体是把el-cascader封装到自己的组件里，然后在使用这个自己封装的组件时发现以下错误，不影响使用，只是控制台报错。我是在一个vue文件中反复使用了这个组件。 估计问题是出现在 el-cascader 的反复渲染上，没关系，为每个级联选择器加个key 1.每次组件渲染时 手动传入个index，发现不行 2.直接在组件里给个key，在data里面设置初始值为0 当config数据发生变化时，监听改变这个key值， 齐活，收工！ ...
VUE+element UI ：TypeError: Cannot read properties of null (reading ‘setAttribute‘)
qq_44906497的博客
08-26 1411
2. 不要用这个组件就行。但是却没有它的子组件。
element-ui.common.js:2436 Uncaught TypeError: Cannot read properties of null (reading 'setAttribute')
09-14
根据您提供的引用内容，报错信息"element-ui.common.js:2436 Uncaught TypeError: Cannot read properties of null (reading 'setAttribute')"通常是由于在使用Element UI时，没有正确引入和使用Element UI组件所导致的问题。 为了解决这个问题，您可以按照以下步骤进行操作： 1. 确保您已经正确引入了Vue和Element UI库，并且在项目中使用了正确的版本。可以通过在命令行中运行以下指令来安装Element UI库：npm install element-ui 2. 验证您在main.js（或其他主入口文件）中正确引入了Vue和Element UI组件。请确保您的代码类似于以下示例： ``` import Vue from 'vue'; import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; import App from './App.vue'; Vue.use(ElementUI); new Vue({ el: '#app', render: h => h(App) }); ``` 3. 检查您的HTML文件中是否正确设置了id为"app"的元素作为Vue实例的挂载点。请确保您的HTML文件中包含以下内容： ``` <div id="app"></div> ``` 4. 如果您已经按照以上步骤进行了操作，但问题仍然存在，那么可能是由于您的代码中存在其他错误或冲突导致的。您可以尝试在浏览器的开发者工具中查看详细的错误信息和堆栈跟踪，以便更好地定位和解决问题。 综上所述，报错信息"element-ui.common.js:2436 Uncaught TypeError: Cannot read properties of null (reading 'setAttribute')"通常是由于未正确引入和使用Element UI组件所导致的问题。请确保您按照上述步骤进行操作，并检查您的代码中是否存在其他错误或冲突。希望能帮助到您！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

变成派大星

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值