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. Mac使用SSH连接远程服务器

    1. 终端通过 ssh 连接远程服务器 ssh -p 36622 root@localhost 2. 文件上传下载 上传 scp 下载 scp 3. 客户端 FinalShell(推荐) FileZi ...

  2. Python Module_Socket_网络编程

    目录 目录 Socket 套接字 套接字的原理 套接字的数据处理方式 套接字类型 Socket 标准函数 ServerSocket 标准函数 ClientSocket 标准函数 公有标准函数 Sock ...

  3. 阶段3 1.Mybatis_01.Mybatis课程介绍及环境搭建_03.jdbc操作数据库的问题分析

    分析一段代码,传统的jdbc的功能,最终要实现的功能就是sql语句.

  4. 整理一下go的ci工具

    代码格式化 go fmt fileName.go goimports 自动格式化import goimports -w fileName.go mod 自动更新/删除包 go mod tidy 检查注 ...

  5. mybatisProxy

    config.xml <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE configurati ...

  6. Java ——集合框架 list lambda set map 遍历方法 数据结构

    本节重点思维导图 集合框架 有序无序:元素放入的顺序与取出的顺序是否一致,一致即为有序,不一致即无序. List:允许重复.有序 ArrayList:长度可变的数组,遍历速度快 LinkedList: ...

  7. CSS3——注释 id 和 class 选择器 css创建(外部、内部、内联样式表)

    注释 /*         注释内容          */ id 和 class 选择器 id   ID属性不要以数字开头,数字开头的ID在 Mozilla/Firefox 浏览器中不起作用 < ...

  8. 【MM系列】SAP 关于物料间的替代问题

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[MM系列]SAP 关于物料间的替代问题   前 ...

  9. vue分别打包测试环境和正式环境

    vue打包时使用不同的环境变量 需求 同一个项目通过打包使用不同的环境变量,目前的环境有三个: 一.本地------开发环境 二.线上------测试环境 三.线上------正式环境 我们都知道vu ...

  10. python下对mysql数据库的链接操作

    参考网址: https://blog.csdn.net/guofeng93/article/details/53994112 https://blog.csdn.net/Chen_Eris/artic ...