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 ...
随机推荐
- Selenium学习之==>WebDriverApi接口详解
浏览器操作 driver.back() # 后退 driver.forward() # 前进 driver.refresh() # 刷新 窗口操作 driver.get_window_size() # ...
- Win8.1+VS2013+WDK8.1+VirtualBox or VMware 驱动开发环境配置
https://blog.csdn.net/charlessimonyi/article/details/50904956 Win8.1+VS2013+WDK8.1+VirtualBox or VMw ...
- OPEN SQL:插入、删除、修改语法
1. UPDATE 用于实现对数据据的更新操作,语法如下: UPDATE <dbtab> set f1...fn (where <condition>). UPDATE < ...
- 【FIORI系列】SAP OpenUI5 (SAPUI5) js框架简单介绍
公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[FIORI系列]SAP OpenUI5 (SA ...
- 如何面对这个残酷的世界?——Java模拟
1,问题引入: 房间里有100个人,每人都有100元钱,他们在玩一个游戏.每轮游戏中,每个人都要拿出一元钱随机给另一个人,最后这100个人的财富分布是怎样的? 2,问题思考: 今天有幸看到这道题目,起 ...
- 应用安全 - 无文件式攻击 - 潜伏型攻击 - MBR - 汇总 (2019-11-29 15:57)
Petya勒索病毒 Date
- android开发错误经验总结
TextView: 1.textView.setText();参数如果直接传int类型,ide不会显示错误.但是运行会报错. 布局渲染: 1. <View android:background= ...
- [19/06/03-星期一] HTML基础_C/S与B/S的区别&标题标签(h1-h6)、段落标签(p)
一.C/S与B/S的区别 C/S(Client/Server):客户端/服务器 1)一般使用的软件都是C/S架构,比如QQ.360.office365: 2)C表示客户端,用户通过客户端来使用软件:S ...
- babel版本问题
在运行webpack命令的时候总是报错,原来是因为babel版本的问题 我安装的webpack3 babel版本是6 babel-loader是8 后来把babel改成7就可以了
- Mybatis-学习笔记(5)动态SQL
1.Mybatis采用功能强大的基于ONGL的表达式来完成动态SQL. 2.ONGL常用的元素有: 1>if <if test="id != null "> an ...