解决 Error in created hook: “TypeError: Cannot read property ‘xxxxxx‘ of undefined“

写Vue 的时候常遇到的错误之一就是XXXXXX未定义,然后来一个undefined
这种问题一般都是创建钩子出错:无法读取未定义的 xxx 属性。

此错误一般多出现在 created() 中, Vue 中数据渲染和DOM 元素渲染是异步的,此时可能会出现加载先后的问题。在DOM 元素渲染未完成的情况下,去操作DOM元素就会出现问题。官方文档中说明this.$nextTick 可解决此问题。

具体 this.$nextTick 是如何解释和定义可参考官方文档

解决方法就是在这里面去实现逻辑:

this.$nextTick(() => {
          // 在此处执行你要执行的函数
      });

一般初始化页面的时候将函数方法放在created()里面或者mounted(),
两者区别不是很大,使用的时候还是需要看场景,本人喜欢放在**mounted()**里面,在vue实例挂载的时候就执行里面的函数方法,当然,也可以直接在创建vue实例的时候就去执行函数方法,不懂vue生命周期的可以查看一下官方文档。钩子函数在实际情况当中使用的频率还是很高的,建议小白学习一下vue的生命周期。

  • 9
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在你描述的情况中,出现了一个错误信息:TypeError: Cannot read property 'split' of undefined。这个错误表示在代码执行过程中,尝试读取一个未定义的属性并进行字符串分割操作。根据你提供的引用信息,可以看出这个错误发生在mounted hook或onLoad hook中。 这个错误可能有多种原因,其中一种可能是在使用split方法之前,没有正确地初始化或赋值对应的属性。这可能导致代码在执行到split方法时无法读取该属性而抛出错误。 另一个可能的原因是,你在某个地方使用了split方法,但没有提供要分割的字符串。这也会导致类似的错误。 为了解决这个问题,你可以按照以下步骤进行排查: 1. 确保在使用split方法之前,对应的属性已经正确地初始化或赋值。 2. 检查是否存在拼写错误或其他语法错误,特别是在传递参数给split方法时。 3. 如果在组件模式下使用附件功能,确保正确传递数据并进行渲染。 如果以上步骤都没有解决问题,你可能需要进一步排查代码,特别是在涉及到数据处理和传递的部分。你可以查看相关的文档或寻求社区的帮助来解决这个问题。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [Error in mounted hook: “TypeError: Cannot read properties of undefined (reading ‘split‘)](https://blog.csdn.net/m0_61480985/article/details/131664382)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* [Error in mounted hook: “TypeError: Cannot read property ‘XXXXX‘ of undefined](https://blog.csdn.net/bihaiyanyu/article/details/109216797)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值