vue中渲染对象中属性时显示未定义的解决


Posted in Javascript onJuly 31, 2020

vue中渲染对象中属性时显示未定义的解决

后端给的对象结构是这样的,三层嵌套

而在最开始的时候我在data中定义了一个对象(dataInfo)接受了图示所有的属性

而在template中我要渲染数据(dataInfo.clientInfo.deviceName)

vue中渲染对象中属性时显示未定义的解决

然后。。。。在这里插入图片描述

未定义。。。作为一个前端菜鸡,百思不得其解。

最终在有道的帮助下,告诉我了此属性不在vue实例上

恍然大悟

只能解析在data中定义也就是vue实例上的对象子一层的东西,对于孙一层的东西就被解析成不在vue实例上的

两种解决方法:

第一:

在定义的dataInfo中定义clientInfo等八个对象

第二:

直接定义八个对象接收八个对象中的东西

这样,孙一层的东西就在vue实例上了

补充知识:vue报错Cannot read property '_withTask' of undefined

控制台报错:

Cannot read property ‘_withTask' of undefined

原因:

template中的出现的绑定事件在methods中没有定义

以上这篇vue中渲染对象中属性时显示未定义的解决就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery EasyUI API 中文文档 - DataGrid数据表格
Nov 17 Javascript
js中的onchange和onpropertychange (onchange无效的解决方法)
Mar 08 Javascript
javascript用函数实现对象的方法
May 14 Javascript
vue.js异步上传文件前后端实现代码
Aug 22 Javascript
浅谈Vuex@2.3.0 中的 state 支持函数申明
Nov 22 Javascript
在knockoutjs 上自己实现的flux(实例讲解)
Dec 18 Javascript
vue里面父组件修改子组件样式的方法
Feb 03 Javascript
Vue实现左右菜单联动实现代码
Aug 12 Javascript
怎样使你的 JavaScript 代码简单易读(推荐)
Apr 16 Javascript
node 标准输入流和输出流代码实例
Sep 19 Javascript
js对象简介与基本用法示例
Mar 13 Javascript
vue项目查看vue版本及cli版本的实现方式
Oct 24 Javascript
JS可断点续传文件上传实现代码解析
Jul 30 #Javascript
Vue单文件组件开发实现过程详解
Jul 30 #Javascript
vue实现从外部修改组件内部的变量的值
Jul 30 #Javascript
在vue中实现嵌套页面(iframe)
Jul 30 #Javascript
Vue文本模糊匹配功能如何实现
Jul 30 #Javascript
VUE 单页面使用 echart 窗口变化时的用法
Jul 30 #Javascript
解决vue单页面多个组件嵌套监听浏览器窗口变化问题
Jul 30 #Javascript
You might like
计算一段日期内的周末天数的php代码(星期六,星期日总和)
2009/11/12 PHP
PHP缓存技术的多种方法小结
2012/08/14 PHP
实现在同一方法中获取当前方法中新赋值的session值解决方法
2014/06/26 PHP
PHP制作百度词典查词采集器
2015/01/29 PHP
Zend Framework入门之环境配置及第一个Hello World示例(附demo源码下载)
2016/03/21 PHP
thinkPHP交易详情查询功能详解
2016/12/02 PHP
php判断str字符串是否是xml格式数据的方法示例
2017/07/26 PHP
浅谈Laravel POST,PUT,PATCH 路由的区别
2019/10/15 PHP
非常好的js代码
2006/06/27 Javascript
Dojo之路:如何利用Dojo实现Drag and Drop效果
2007/04/10 Javascript
简单的jquery拖拽排序效果实现代码
2011/09/20 Javascript
JQuery鼠标移到小图显示大图效果的方法
2015/06/10 Javascript
jquery实现表单输入时提示文字滑动向上效果
2015/08/10 Javascript
浅谈angular.js中实现双向绑定的方法$watch $digest $apply
2015/10/14 Javascript
谈一谈javascript闭包
2016/01/28 Javascript
基于vue+uniapp直播项目实现uni-app仿抖音/陌陌直播室功能
2019/11/12 Javascript
纯js实现无缝滚动功能代码实例
2020/02/21 Javascript
微信小程序中target和currentTarget的区别小结
2020/11/06 Javascript
[53:15]Newbee vs Pain 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python实现哈希表
2014/02/07 Python
学习python 之编写简单乘法运算题
2016/02/27 Python
centos6.7安装python2.7.11的具体方法
2017/01/16 Python
Python之py2exe打包工具详解
2017/06/14 Python
用Python获取摄像头并实时控制人脸的实现示例
2019/07/11 Python
python实现学生通讯录管理系统
2021/02/25 Python
Big Green Smile德国网上商店:提供各种天然产品
2018/05/23 全球购物
劳动竞赛口号
2014/06/16 职场文书
党的群众路线查摆剖析材料
2014/10/10 职场文书
征求意见函
2015/06/05 职场文书
秋收起义观后感
2015/06/11 职场文书
高中英语教学反思范文
2016/03/02 职场文书
php中pcntl_fork详解
2021/04/01 PHP
Pytorch中TensorBoard及torchsummary的使用详解
2021/05/12 Python
继承Win10缺点!教你关闭Win11烦人的网络搜索
2021/11/23 数码科技
python周期任务调度工具Schedule使用详解
2021/11/23 Python
动态规划之使用备忘录来改进Javascript函数
2022/04/07 Javascript