Vue+Echarts报错Cannot set properties of undefined (setting ‘plate‘)

 更新时间:2022年08月10日 10:56:42   作者:_仰望星空的你  
这篇文章主要介绍了Vue+Echarts报错Cannot set properties of undefined (setting ‘plate‘)的问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

Vue+Echarts报错Cannot set properties of undefined (setting ‘plate‘)

代码:


在这里插入图片描述

报错信息:


在这里插入图片描述

上面的报错主要是:

Cannot set properties of undefined (setting ‘plate’)

翻译之后就是:无法设置未定义的属性(设置“plate”)(这里plate是在this里面定义的一个属性)

从这就能大概猜出是因为获取不到data里定义的这个属性造成的(具体就是this指向问题)

第一次解决问题

原本我以为定义一个that方法把他指向给this就行,结果还是报错了

在这里插入图片描述

第二次解决问题

仔细检查了一下,发现是formatter造成的,改成箭头函数就可以直接获取到data定义的内容

在这里插入图片描述

Vue引入Echarts报错解决

在Vue项目中引入Echart(使用npm install指令)的时候报错:

PS G:> npm install
npm WARN old lockfile 
npm WARN old lockfile The package-lock.json file was created with an old version of npm,
npm WARN old lockfile so supplemental metadata must be fetched from the registry.
npm WARN old lockfile This is a one-time fix-up, please be patient...
npm WARN old lockfile
npm ERR! code EINVALIDPACKAGENAME
npm ERR! Invalid package name "_@ampproject_remapping@2.1.2@@ampproject": name cannot start with an underscore; name can only contain URL-friendly characters

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\胜胜\AppData\Local\npm-cache\_logs\2022-04-08T15_40_42_658Z-debug.log

原因是package-lock.json这个文件在创建的时候使用了旧版本的npm,其必须从注册表中获取补充元数据。

使用cnpm install指令即可顺利安装相应的依赖。

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 详解Vue 自定义hook 函数

    详解Vue 自定义hook 函数

    这篇文章主要介绍了详解Vue自定义hook函数,hook函数本质是一个函数,把setup函数中使用的Composition API进行了封装,更多相关内容感兴趣的朋友可以参考一下
    2022-06-06
  • Vue利用draggable实现多选拖拽效果

    Vue利用draggable实现多选拖拽效果

    这篇文章主要为大家详细介绍了如何利用vue中的draggable插件实现多选拖拽效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-05-05
  • vue 配置多页面应用的示例代码

    vue 配置多页面应用的示例代码

    这篇文章主要介绍了vue 配置多页面应用的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-10-10
  • vue实现无限消息无缝滚动

    vue实现无限消息无缝滚动

    这篇文章主要为大家详细介绍了vue实现无限消息无缝滚动,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • 详解vue-cli 接口代理配置

    详解vue-cli 接口代理配置

    本篇主要介绍了vue-cli 接口代理配置,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-12-12
  • Vue项目打包并部署nginx服务器的详细步骤

    Vue项目打包并部署nginx服务器的详细步骤

    vue项目开发好之后需要部署到服务器上进行外网访问,下面这篇文章主要给大家介绍了关于Vue项目打包并部署nginx服务器的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-07-07
  • vue使用svg文件补充-svg放大缩小操作(使用d3.js)

    vue使用svg文件补充-svg放大缩小操作(使用d3.js)

    这篇文章主要介绍了vue使用svg文件补充-svg放大缩小操作(使用d3.js),具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-09-09
  • vue-cli设置css不生效的解决方法

    vue-cli设置css不生效的解决方法

    这篇文章主要介绍了vue-cli设置css不生效的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-02-02
  • 解决vue3项目打包发布到服务器后访问页面显示空白问题

    解决vue3项目打包发布到服务器后访问页面显示空白问题

    这篇文章主要介绍了解决vue3项目打包发布到服务器后访问页面显示空白问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-03-03
  • Vue使用Echarts实现立体柱状图

    Vue使用Echarts实现立体柱状图

    这篇文章主要为大家详细介绍了Vue使用Echarts实现立体柱状图,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09

最新评论