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使用keep-alive无效以及include和exclude用法解读

    vue使用keep-alive无效以及include和exclude用法解读

    这篇文章主要介绍了vue使用keep-alive无效以及include和exclude用法解读,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-07-07
  • VUE使用canvas实现签名组件

    VUE使用canvas实现签名组件

    这篇文章主要为大家详细介绍了VUE使用canvas实现签名组件,兼容PC移动端,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-07-07
  • Vue如何通过浏览器控制台查看全局data值

    Vue如何通过浏览器控制台查看全局data值

    在写vue项目时想到一个问题,项目里面的文件都是一个个的组件,如何在控制台中修改,查看组件data里的值呢,下面这篇文章主要给大家介绍了关于Vue如何通过浏览器控制台查看全局data值的相关资料,需要的朋友可以参考下
    2023-04-04
  • Vue中$on和$emit的实现原理分析

    Vue中$on和$emit的实现原理分析

    这篇文章主要介绍了Vue中$on和$emit的实现原理分析,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-05-05
  • 浅谈一下Vue技术栈之生命周期

    浅谈一下Vue技术栈之生命周期

    这篇文章主要介绍了浅谈一下Vue技术栈之生命周期,每一个vue实例从创建到销毁的过程,就是这个vue实例的生命周期,这些过程中会伴随着一些函数的自调用,需要的朋友可以参考下
    2023-05-05
  • vue如何通过点击事件弹出弹窗页面详解

    vue如何通过点击事件弹出弹窗页面详解

    弹窗是我们开发中经常遇到的一个功能,下面这篇文章主要给大家介绍了关于vue如何通过点击事件弹出弹窗页面的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-06-06
  • vuex中的5个属性使用方法举例讲解

    vuex中的5个属性使用方法举例讲解

    vuex是专门为Vue.js应用程序开发的状态管理模式,下面这篇文章主要给大家介绍了关于vuex中5个属性使用方法的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-04-04
  • vue实现分页的三种效果

    vue实现分页的三种效果

    这篇文章主要为大家详细介绍了vue实现分页的三种效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-06-06
  • 在Vue中实现父组件控制子组件的值的两种方法

    在Vue中实现父组件控制子组件的值的两种方法

    在Vue开发中,父组件和子组件之间的数据传递是一项常见的任务,本文将介绍如何在Vue中实现父组件控制子组件的值,以便灵活地管理和更新子组件的数据,文中有详细的代码讲解,需要的朋友可以参考下
    2023-11-11
  • Vue Router深扒实现原理

    Vue Router深扒实现原理

    在看这篇文章的几点要求:需要你先知道Vue-Router是个什么东西,用来解决什么问题,以及它的基本使用。如果你还不懂的话,建议上官网了解下Vue-Router的基本使用后再回来看这篇文章
    2022-09-09

最新评论