一 vue的数据模型data报错
原因
1.代码中某个写了变量 但变量没在data中声明,就会返回这个错误
2.也可能是后台没有返回该返回的数据,导致前端该赋值给data数据模型里变量的值为undefined,就会报这个错
可以debugger,并且将可疑的地方都打上断点,一一调试,就能排查出问题
二 报0为undefined情况
出现这个错误的原因其实是Vue在拿到数据之前渲染了dom
一般情况下,是异步加载的时候,返回的某个数据返回异常为unfettered
debugger一下找出来即可
数据渲染页面时候, 某个属性未赋值,导致undefined
三 报1为undefined情况
这其实跟上面0的情况是一样的
具体可以看看vue的dom和数据的加载机制,下面的参考文章给出解释
[Vue warn]: Error in render: "TypeError: Cannot read property '1' of undefin
数据变量未在data中定义,但在creatd中直接赋值了,则报undefined
比如
created () {
this.DetailList = this.$route.query
},
// DetailList未在data中声明,所以报undefined
参考文章解释
https://blog.csdn.net/edc3001/article/details/86833558
四 使用echarts报错情况
<1>情况一 vue引入echarts后js报错 Cannot read property ‘getAttribute‘ of null
通俗理解:
是echars图标还没出来，数据现出来了
错误原因分析：
<1>html 元素还没加载或者代码还没有执行完就先执行了 echarts 的渲染，也就是代码执行前后顺序的问题。
<2>初始化 echarts 的 DOM 元素不存在。
即
在运行Vue项目时出现了上述错误，出现该错误的原因是Echarts的图形容器还未生成就对其进行了初始化所造成的
根据报错信息查找原因发现是因为 实例化echarts的元素不存在，查看官方文档代码示例：
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
基于准备好的dom，初始化echarts实例，也就是只有 页面存在的HTML元素才可以去初始化。
如果不知道页面是否存在此HTML元素，那么在 实例化echarts前打印一下看看
console.log(document.getElementById('main'))
解决方案一： this.$nextTick
// 在echarts使用中,直接把setCharts()写到数据请求的方法中执行(这样使用问题可能的得不到解决,可在created使用nextTick)
this.$nextTick(function () {
this.setCharts();
});
// 在created()使用可以解决上述bug问题
created () {
this.$nextTick(() => {
this.updateData(); // 该方法主要是拿数据
})
},
解决方案二：利用setTimeout()延迟加载(不推荐使用)
setTimeout(() => {
this.getChart();
}, 1000);
<2>情况二 vue中使用echarts遇到Error in nextTick: "TypeError: Cannot read property 'getAttribute' of undefined"
vue this.nextTick()，这个函数可以做到数据更新之后等待Vue更新 DOM，DOM状态更新后进行一些操作
但是在created阶段使用了nextTick后,遇到报上述错误,则需要加个条件判断数据存在
解决：加一个判断 if (数据存在)，再执行this.nextTick()方法
如果在created阶段使用了nextTick,则只需要判断数据是否存在再执行后续setChart的代码(这个方法主要初始化dom和画图)
例如
if(Data && BuyRate && SaleRate){
this_.setChart(Data,BuyRate,SaleRate)
}
setChart(Data,BuyRate,SaleRate) {
let dollarChart = this.$echarts.init(this.$refs.dollarChart)
let dollarOption = {
tooltip: {
trigger: 'axis'
},
legend: {
type: 'plain',
left: 'left',
top:'12px',
data: ['买入汇率', '卖出汇率']
},
xAxis: {
type: 'category',
axisLabel : {//坐标轴刻度标签的相关设置。
interval:0,
rotate:"45"
},
data: Data
},
yAxis: {
type: 'value',
max : 6.7,
min : 6.3,
splitNumber : 7
},
series: [
{
name: '买入汇率',
data: BuyRate,
type: 'line'
},
{
name: '卖出汇率',
data: SaleRate,
type: 'line'
}
]
}
dollarChart.setOption(dollarOption)
},