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. 2018-5 - 热经 - 北京中地时空数码科技有限公司 - 研发工程师(WEBGIS 方向)

    一面: 登记,填写个人信息 笔试 选择题: HTML,CSS,JS 的选择题,都是基础题.其中有一道问哪个不是 document 的属性或方法,我在 bgColor 和 focus() 上面纠结了一下 ...

  2. ES6实现数组去重

    ES6 提供了新的数据结构 Set.它类似于数组,但是成员的值都是唯一的,没有重复的值. Array.from方法可以将 Set 结构转为数组. 扩展运算符内部调用的是数据结构的 Iterator 接 ...

  3. between()函数

    1 between函数返回一个布尔量,即如果在该范围内,返回True,否则返回False. 注意between()中括号内是左闭右闭区间 在dataframe中常可用来通过选择某一列元素的范围来选择另 ...

  4. 【Linux 应用编程】进程管理 - 进程、线程和程序

    基本概念 程序和进程的区别 程序是平台相关的二进制文件,只占用磁盘空间.编写完程序代码后,编译为可执行的二进制文件即可. 进程是运行中的程序,占用 CPU.内存等系统资源. 通过 Shell 命令,可 ...

  5. .net通用签名方法 webapi签名方法

    验证签名方法 [HttpGet] public HttpResponseMessage LockRegister(string 参数1, int 参数2, string 参数3, string 参数4 ...

  6. codeforces 1156E Special Segments of Permutation

    题目链接:https://codeforc.es/contest/1156/problem/E 题目大意: 在数组p中可以找到多少个不同的l,r满足. 思路: ST表+并查集. ST表还是需要的,因为 ...

  7. Hibernate 日期映射 条件查询

    1. hql: ...and accopt_time > ?" 2. query.setDate Query query = session.createQuery(hql); int ...

  8. Lucky Boy

    Lucky Boy Problem Description Recently, Lur have a good luck. He is also the cleverest boy in his sc ...

  9. 如何配置vsftpd服务器

    1,通过yum查看本地是否存在vsftpd rpm -qa|grep vsftpd [root@node2 ~]# rpm -qa |grep vsftpdvsftpd-3.0.2-25.el7.x8 ...

  10. HDU-1018 BigNumber

    Big Number Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total ...