Error in nextTick: “TypeError: Cannot read property ‘style‘ of undefined“的报错原因之一及解决办法

一 . 报错场景

vue项目中用element-ui
在这里插入图片描述
经过排查,发现是el-table处发生的报错,相关代码如下:

<tempalte>
  <div class="message">
    <el-table :max-height="getTableHeight" :data="tableData3" stripe tooltip-effect="dark"> 
      <el-table-column prop="account" label="账号"></el-table-column>
    
	  <el-table-column prop="nickName" label="昵称"></el-table-column>

      <el-table-column prop="phone" label="手机号"></el-table-column>
     </el-table>
  </div>
</tempalte>

<script>
  data() {
    return {
      screenHeight: document.body.clientHeight,
    }
  },
  
  mounted() {
    window.onresize = () => {
      this.screenHeight = document.body.clientHeight
    }
  },
  
  computed: {
    getTableHeight() {
      return this.clientHeight- 380
    }
  }
</script>

仔细的检查以后(实际项目代码颇多),发现是由于变量写错了,此处应为screenHeight,如下图
在这里插入图片描述
修改之后就解决了问题

二. 后续

其实仔细看报错,里面已经告诉我们大概在哪个部分出错,如下图:(设置高度的地方)
在这里插入图片描述

一般报这种错误的时候,基本都是自己不细心,少写、多写、写错造成的,仔细看下错误,根据报错
找对应的地方,你就会很快解决问题的。
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
这个错误通常发生在你使用了数组的某个元素,但是该数组在当前作用域中是 undefined 的情况下。具体来说,可能是以下几种情况导致的: 1. 你在使用数组时,没有正确地初始化数组,导致数组为 undefined。 2. 你在使用数组时,数组的某个元素为 undefined,导致访问该元素时出现错误。 3. 你在使用数组时,数组的长度为 0,导致访问该数组的第一个元素时出现错误。 解决这个问题的方法,可以先检查一下你的代码,确保数组被正确地初始化,并且数组的某个元素不是 undefined。另外,你也可以在访问数组的元素之前,先检查一下数组的长度是否为 0,以避免出现这个错误。另外,你也可以使用 Vue.nextTick() 来确保数组被渲染完成后再访问它的元素,这样也可以避免这个错误。例如: ``` <template> <div> <ul> <li v-for="(item, index) in items" :key="index">{{ item }}</li> </ul> <button @click="handleClick">访问数组元素</button> </div> </template> <script> export default { data() { return { items: ['apple', 'banana', 'orange'] } }, methods: { handleClick() { this.$nextTick(() => { if (this.items.length > 0) { console.log(this.items[0]); } }); } } } </script> ``` 在上面的代码中,我先使用了 $nextTick 方法确保数组被渲染完成后再访问它的元素,然后在 handleClick 方法中,我使用 if 语句先检查了数组的长度是否大于 0,再访问数组的第一个元素。这样就可以避免出现访问 undefined 的错误。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值