解决Vue报错Error in callback for immediate watcher “height“: “TypeError: Cannot read properties of-Toy模板网

这篇具有很好参考价值的文章主要介绍了解决Vue报错Error in callback for immediate watcher “height“: “TypeError: Cannot read properties of。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1.背景

最近在项目中遇到了一个问题，控制台报错Error in callback for immediate watcher "height": "TypeError: Cannot read properties of undefined (reading 'style')"，找了好久，不知道哪里的错误，最后终于解决了，于是记录一下。

控制台报错，如下所示

解决Vue报错Error in callback for immediate watcher “height“: “TypeError: Cannot read properties of

这个错误报得莫名其妙，既没告诉你具体位置，也没告诉你是哪里出错，页面和数据都能正常显示，于是我找啊找啊，终于知道是哪里的问题了。

2.业务场景

代码中是要给table 设置一个高度，而我在data中把height赋值为空了，具体请看下面代码

解决Vue报错Error in callback for immediate watcher “height“: “TypeError: Cannot read properties of

这里就涉及到vue中的生命周期函数，以及执行顺序的先后问题了。vue是先拿到data里面的数据，再去执行created和mounted里面的函数，而我把height赋值为空了，当vue拿到data里面的数据时，为空，所以就会报错，后面再执行mounted里面的高度计算方法时，也只是给height赋值。所以就会出现控制台先报错，后面渲染的时候再拿到你给它设置的高度，页面也能正常显示

这里应该把height赋值为auto，即height：“auto”，就不会报这个错误了。但是鉴于代码的优化和规范化，改了一种更加规范和简洁的方法。

解决Vue报错Error in callback for immediate watcher “height“: “TypeError: Cannot read properties of

优化后的方法，两步就搞定了，不需要在data里面声明了，把高度计算的函数放在computed计算属性里面就解决了，也解决了控制台报错的问题。

文章来源地址https://www.toymoban.com/news/detail-511889.html

到了这里，关于解决Vue报错Error in callback for immediate watcher “height“: “TypeError: Cannot read properties of的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！