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(页面成功渲染)的更多相关文章

  1. Vue报错: Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'protocol')

    Vue报错: Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'protocol') 报错信 ...

  2. vue报错信息

    1.Property or method "xxx" is not defined on the instance but referenced during render. 原因 ...

  3. 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' ...

  4. linux下, 再次遇到使用thinkphp的模板标签时,报错used undefined function \Think\Template\simplexml_load_string() 是因为没有安装 php-xml包

    linux下, 使用thinkphp的模板标签,如 eq, gt, volist defined, present , empty等 标签时, 报错: used undefined function ...

  5. Vue报错——“Trailing spaces not allowed”

    在VSCode中开发Vue 报错:“Trailing spaces not allowed” 这是空格多了,删除多余的空格就可以了

  6. yii2.0 联表查询数据库报错:undefined index order_id

    1.在查询时加了->select();如下,要加上order_id,即关联的字段(比如:order_id)比如要在select中,否则会报错:undefined index order_id / ...

  7. 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 ...

  8. vue.js数据可以在页面上渲染成功却总是警告提示某个字段“undefined”未定义

    最近在开发公司的一个后端管理系统,用的是比较流行的vue框架.在开发过程中,总是出现各种各样的报错问题,有警告的,有接口不通的,有自己马虎造成的低级错误的等等,这些错误在一些老司机面前分分钟解决,但今 ...

  9. vue数据已渲染成 但还是报错 变量 undefined

    问题:页面上的数据已渲染出来,但是控制台还是报错变量未undefined,主要是当页面加载完成后,数据并未加载完,所以会报次错误. 解决办法:在数据渲染的主节点(最外层的div)添加 v-if=“da ...

随机推荐

  1. Selenium学习之==>WebDriverApi接口详解

    浏览器操作 driver.back() # 后退 driver.forward() # 前进 driver.refresh() # 刷新 窗口操作 driver.get_window_size() # ...

  2. Win8.1+VS2013+WDK8.1+VirtualBox or VMware 驱动开发环境配置

    https://blog.csdn.net/charlessimonyi/article/details/50904956 Win8.1+VS2013+WDK8.1+VirtualBox or VMw ...

  3. OPEN SQL:插入、删除、修改语法

    1. UPDATE 用于实现对数据据的更新操作,语法如下: UPDATE <dbtab> set f1...fn (where <condition>). UPDATE < ...

  4. 【FIORI系列】SAP OpenUI5 (SAPUI5) js框架简单介绍

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[FIORI系列]SAP OpenUI5 (SA ...

  5. 如何面对这个残酷的世界?——Java模拟

    1,问题引入: 房间里有100个人,每人都有100元钱,他们在玩一个游戏.每轮游戏中,每个人都要拿出一元钱随机给另一个人,最后这100个人的财富分布是怎样的? 2,问题思考: 今天有幸看到这道题目,起 ...

  6. 应用安全 - 无文件式攻击 - 潜伏型攻击 - MBR - 汇总 (2019-11-29 15:57)

    Petya勒索病毒 Date

  7. android开发错误经验总结

    TextView: 1.textView.setText();参数如果直接传int类型,ide不会显示错误.但是运行会报错. 布局渲染: 1. <View android:background= ...

  8. [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 ...

  9. babel版本问题

    在运行webpack命令的时候总是报错,原来是因为babel版本的问题 我安装的webpack3  babel版本是6 babel-loader是8 后来把babel改成7就可以了

  10. Mybatis-学习笔记(5)动态SQL

    1.Mybatis采用功能强大的基于ONGL的表达式来完成动态SQL. 2.ONGL常用的元素有: 1>if <if test="id != null "> an ...