vue 报错 :属性undefined(页面成功渲染)
vue 报错:Cannot read property 'instrumentId' of undefined"
相关代码如下:
<template>
...
<span>{{data.params.instrumentId}}</span>
...
</template>
<script>
export default {
data () {
return {
data: {}
};
},
methods: {
// 请求接口获得数据
getData () {
request({
url: '/tapi/futures/'
}).then(response => {
if (response) {
allData = response; // allData 是一个对象,用来储蓄数据
this.data = allData.IF;
}
});
}
},
created () {
this.getData();
}
};
</script>
结果返回的数据结构如图:
虽然页面可以正常显示,但 Vue 和浏览器控制台都报错如下,一直找不到原因,求解。
解决方法
1.因为是异步请求,页面渲染刚的时候还没有拿到这个值,所以会报错。你需要在节点上用if
判断一下,在有数据的时候再进行渲染。或者你在声明data
的时候,将里面的字段也一并声明出来。
<template>
...
<span v-if="data.params && data.params.instrumentId">{{data.params.instrumentId}}</span>
...
</template>
2.
created () {
this.getData();
}
把上面改成如下:
created () {
this.$nextTick(function(){
this.getData();
});
}
vue 报错 :属性undefined(页面成功渲染)的更多相关文章
- Vue报错: Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'protocol')
Vue报错: Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'protocol') 报错信 ...
- vue报错信息
1.Property or method "xxx" is not defined on the instance but referenced during render. 原因 ...
- Vue 报错Error in render: “TypeError: Cannot read properties of null (reading ‘xxx’)” found in
前端vue报错 [Vue warn]: Error in render: "TypeError: Cannot read properties of null (reading 'name' ...
- linux下, 再次遇到使用thinkphp的模板标签时,报错used undefined function \Think\Template\simplexml_load_string() 是因为没有安装 php-xml包
linux下, 使用thinkphp的模板标签,如 eq, gt, volist defined, present , empty等 标签时, 报错: used undefined function ...
- Vue报错——“Trailing spaces not allowed”
在VSCode中开发Vue 报错:“Trailing spaces not allowed” 这是空格多了,删除多余的空格就可以了
- yii2.0 联表查询数据库报错:undefined index order_id
1.在查询时加了->select();如下,要加上order_id,即关联的字段(比如:order_id)比如要在select中,否则会报错:undefined index order_id / ...
- Vue报错 type check failed for prop “xxx“. Expected String with value “xx“,got Number with value ‘xx‘
vue报错 [Vue warn]: Invalid prop: type check failed for prop "name". Expected String with ...
- vue.js数据可以在页面上渲染成功却总是警告提示某个字段“undefined”未定义
最近在开发公司的一个后端管理系统,用的是比较流行的vue框架.在开发过程中,总是出现各种各样的报错问题,有警告的,有接口不通的,有自己马虎造成的低级错误的等等,这些错误在一些老司机面前分分钟解决,但今 ...
- vue数据已渲染成 但还是报错 变量 undefined
问题:页面上的数据已渲染出来,但是控制台还是报错变量未undefined,主要是当页面加载完成后,数据并未加载完,所以会报次错误. 解决办法:在数据渲染的主节点(最外层的div)添加 v-if=“da ...
随机推荐
- String.prototype.replace
第一个参数是正则表达式 第二个参数是一个replacer 函数的入参如下: replacer(match,p1,p2,p3.. 其实也相当于 replacer($&,$1,$2,$3.. 资料 ...
- div动画旋转效果
animation: spin 10s linear infinite;
- 合理设置redis主从buffer 不错
背景 某次抢购时,一个redis集群的某个分片,从实例响应时间陡增到几十秒,报警后运维将其中一个本应该下线的slave下掉,问题减轻但没有解决,又把另一个正常的slave下线掉,问题消失. maste ...
- 在Vue文件中引入外部URL链接
前言:最近做一个vueNuxt的项,没有index.html 也没有main.js项目需要引入一些外部的包,没什么技术含量只是一种思路 在vue生命钩子函数中动态创建JavaScript标签追加到HT ...
- 【Qt开发】Qt中显示图像的两种方法对比
在Qt中处理图片一般都要用到QImage类,但是QImage的对象不能够直接显示出来,要想能看到图片,初步发现有两种方法. 一.QImage转QPixmap,然后用QLabel::setPixmap( ...
- Python解释器判断整数相加溢出
溢出,则和的最高位(即符号位)与两个加数都不相同,例如 1)非负数+非负数=负数 2)负数+负数=非负数 那么,假设x为a与b的和,((a^b)>=0 && (x^a)<0 ...
- Sql server 执行计划详解
序言 本篇主要目的有二: 1.看懂t-sql的执行计划,明白执行计划中的一些常识. 2.能够分析执行计划,找到优化sql性能的思路或方案. 如果你对sql查询优化的理解或常识不是很深入,那么推荐几骗博 ...
- 小白如何入门 Python 爬虫?
本文针对初学者,我会用最简单的案例告诉你如何入门python爬虫! 想要入门Python 爬虫首先需要解决四个问题 熟悉python编程 了解HTML 了解网络爬虫的基本原理 学习使用python爬虫 ...
- python中虚拟环境virtualenvwrapper的安装和使用
虚拟环境为什么需要虚拟环境: 到目前为止,我们所有的第三方包安装都是直接通过 pip install xx 的方式进行安装的,这样安装会将那个包安装到你的系统级的 Python 环境中.但 ...
- linux查找进程id和杀死进程以及查看内存??
ps 命令用于查看当前正在运行的进程 ps ax : 显示当前系统进程的列表 ps aux : 显示当前系统进程详细列表以及进程用户 -e 显示所有进程,环境变量 此参数的效果和指定"A&q ...