TypeError_Cannot read property_disabled_of_null

288 字

1 分钟

TypeError_Cannot read property_disabled_of_null

2025-06-19

Vue

前言#

之前制作了第三方登录页面，每次点击的时候，都会出现这个错误：Uncaught TypeError: Cannot read property ‘disabled’ of null

之前以为是因为我给input组件设置了disabled的原因

1
<el-button type="success" circle disabled>
2
  <span class="iconfont">&#xe66f;</span>
3
</el-button>

例如我对上面设置了disabled属性，让按钮无法被点击，但是我把全部的disabled都给删除后，还是有这样的错误

经过了排查，发现是因为element-ui的其它组件而引起的：Dropdown 下拉菜单

引入的代码如下所示：

1
<el-dropdown @command="handleCommand" class="userInfoAvatar">
2
  <span class="el-dropdown-link" @click="userLogin">
3
    <img v-if="!isLogin" src="../../static/images/defaultAvatar.png">
4
    <img v-if="isLogin&&userInfo.photoUrl!=undefined" :src="PICTURE_HOST + userInfo.photoUrl">
5
    <img v-if="isLogin&&userInfo.photoUrl==undefined"
6
         src="https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif">
7
  </span>
8

9
  <el-dropdown-menu slot="dropdown" v-if="isLogin">
10
    <el-dropdown-item command="goUserInfo">主页</el-dropdown-item>
11
    <el-dropdown-item command="logout">退出</el-dropdown-item>
12
  </el-dropdown-menu>
13
</el-dropdown>

从上面可以看出，当 isLogin = false的时候，el-dropdown-menu是不会被渲染出来的，那么就会存在问题了

因为el-dropdown如果没有设置它的子元素，就会报错，也就是刚刚我们看到的那个Uncaught TypeError: Cannot read property ‘disabled’ of null错误

我们只需要把原来的v-if改成v-show即可，如下所示：

1
<el-dropdown-menu slot="dropdown" >
2
  <el-dropdown-item command="goUserInfo" v-show="isLogin">主页</el-dropdown-item>
3
  <el-dropdown-item command="logout" v-show="isLogin">退出</el-dropdown-item>
4
</el-dropdown-menu>

那么错误就消失了~！

TypeError_Cannot read property_disabled_of_null

http://localhost:4321/posts/vue/typeerror_cannot-read-property_disabled_of_null/

发布于

2025-06-19

许可协议

CC BY-NC-SA 4.0

1

前言