数据绑定多级对象属性时的报错解决

数据绑定多级对象属性时的报错解决

(1)例子如下:

在这里插入图片描述
(2)当syncObjForm被后台数据赋值时,会产生报错:
在这里插入图片描述
(3)原因就是:
模板在渲染时,读取对象中的某个对象时发现该对象为undefined,不能继续往下取值,通俗点就是三层表达式a.b.c,在对象a中不存在属性b,那么读取对象a.b.c中的值,自然会报错(若是两层表达式a.b则不会报错,返回的是undefined)

vue渲染机制中,异步数据先显示初始数据,再显示带数据的数据,所以加载syncObjForm时候还是一个空对象,当渲染完成后,才加载异步数据,因此在渲染时,出现的三层表达式在syncObjForm中取tableOutput属性中的tableName属性的值自然会报错,但是渲染完成后,syncObjForm中的值加载好了,自然可以取到,这也就解释了为什么界面正常显示,但开发者工具会报错的原因。

(4)解决方法:
模板中多添加一个v-if判断条件,即表示如果syncObjForm取不到tableOutput属性,则不加载该div(注意,不能用v-show,v-show的机制是加载后,根据条件判断是否显示)
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/807801.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

TensorRT从入门到了解-学习笔记(待续)

b站TensorRT官方教程学习笔记 目录 0.简述1. Part1 TensorRT 简介1.1 TensorRT 简介1.1.1 TensorRT基本特性和用法1.1.2 TensorRT基本流程1.1.3 TensorRT上搭建模型方法1.1.3.1 Workflow:使用TensorRT API搭建1.1.3.1.1 Logger日志记录器1.1.3.1.2 Builder引擎构建器1.1.3.2 Wo…

普通人怎么赚钱?2024普通人做什么好?2024创业项目小成本!2024创业新项目新商机!2024做什么行业前景好?

普通人真的想赚钱,必须得去赚看得见的钱。什么是看得见的钱?打个比方卖一份炒粉,成本是三块,卖十块钱,一天卖出去100份,那一天就赚700块钱,而不是去跟人合伙,你连钱都没赚到&#xf…

【matlab】如何解决打开缓慢问题(如何让matlab在十几秒内打开)

【matlab】如何解决打开缓慢问题(如何让matlab在十几秒内打开) 找到我们解压缩时Crack中的license_standalone.lic文件,将其拷贝 在安装matlab的路径下新建一个文件,粘贴上面的license_standalone.lic文件 在桌面鼠标移动到matl…

每日一题:修改后的最大二进制字符串

给你一个二进制字符串 binary ,它仅有 0 或者 1 组成。你可以使用下面的操作任意次对它进行修改: 操作 1 :如果二进制串包含子字符串 "00" ,你可以用 "10" 将其替换。 比方说, "00010"…

【leetcode面试经典150题】34.有效的数独(C++)

【leetcode面试经典150题】专栏系列将为准备暑期实习生以及秋招的同学们提高在面试时的经典面试算法题的思路和想法。本专栏将以一题多解和精简算法思路为主,题解使用C语言。(若有使用其他语言的同学也可了解题解思路,本质上语法内容一致&…

OpenHarmony4.0源码解析之媒体框架

媒体框架简介 媒体框架 multimedia_player_framework 主要提供音视频的录制与播放功能。 框架简介 从框架图中可以看出,媒体框架的主要工作模式为通过 Gstreamer 的插件自动化注册及插件组合功能,将其余媒体播放相关的框架功能插件化,配合 …

linux学习:内存(栈,堆,数据段,代码段)

目录 内存 栈内存 堆内存 数据段 代码段 注意 堆 例子 内存 Linux 操作系统为了更好更高效地使用内存,将 实际物理内存进行了映射,对应用程序屏蔽了物理内存的具体细节,有利于简化程序的编写 和系统统一的管理。 假设你正在使用的…

【热门话题】OneFlow深度学习框架介绍

🌈个人主页: 鑫宝Code 🔥热门专栏: 闲话杂谈| 炫酷HTML | JavaScript基础 ​💫个人格言: "如无必要,勿增实体" 文章目录 OneFlow深度学习框架介绍引言一、OneFlow概述1.1 定位与起源1.2 核心特性数据流…

1.8.1 卷积神经网络近年来在结构设计上的主要发展和变迁——AlexNet

1.8.1 卷积神经网络近年来在结构设计上的主要发展和变迁——AlexNet (从AlexNet到ResNet系列) AlexNet首次亮相是在2012年的ILSVRC大规模视觉识别竞赛上,它将图像分类任务的Top-5错误率降低到15.3%,大幅领先于其他传统方法。AlexNet是首个实用性很强的…

Linux网络名称空间的调试方法全面分析

Linux网络名称空间是一种广泛使用的技术,用于隔离网络环境,特别是在容器化和微服务架构中📦。然而,随着网络名称空间的广泛应用,开发者和系统管理员可能会遇到需要调试网络名称空间配置和性能的情况🔍。本文…

WEB3浪潮下的全新体验:精灵派对链游引领边玩边赚的创新之旅

在当前的数字经济浪潮中,区块链技术以其独特的去中心化特性,正在逐渐改变我们的生活和工作方式。其中,区块链游戏(链游)作为新兴的领域,正以其独特的优势吸引着全球玩家的目光。在这样一个背景下&#xff0…

split和join的区别

split和join是Python中字符串(string)类型的两种常用方法,它们用于对字符串进行分割和合并。 1.split() 方法: split() 方法用于将字符串按照指定的分隔符(如果没有指定分隔符,则默认为所有的空白字符&am…

C语言学习笔记day18

1. 指针基本概念 1.地址:用来区分内存中不同字节的编号 2.指针:地址就是指针,指针就是地址 3.指针变量:存储指针的变量,有时去掉变量,称为指针 2. 指针运算符 1.&: 1.获得一个变量在内存空间中的首地址 2.让表达式类型升级 2.*: 1.取…

ssm“健康早知道”微信小程序

采用技术 ssm“健康早知道”微信小程序的设计与实现~ 开发语言:Java 数据库:MySQL 技术:SpringMVCMyBatis 工具:IDEA/Ecilpse、Navicat、Maven 需求分析 利用ssm、Java、MyEclipse和mysql数据库等知识点,结合相关设…

element-ui自定义table表头,render-header使用

<el-table-column header-align="right" align="right" :render-header="renderHeader"><el-table-column prop="week" label="日期"></el-table-column><el-table-column prop="name" labe…

云卓C20,22倍变焦三轴夜视云台

云卓C20三轴云台&#xff0c;带探照灯&#xff0c;打破光线与空间束缚。具备22倍光学变焦与探照能力&#xff0c;为视觉带来新视角&#xff0c;随时捕捉高清影像&#xff0c;精准搜寻广阔区域。配备变焦高亮聚光灯&#xff0c;强化夜间作业效能与安全保障。适用于公安、电力、救…

[html]网页结构以及常见标签用法

哎&#xff0c;我服了&#xff0c;明明之前学了html的&#xff0c;但时间一长我就忘记了&#xff0c;本来flask学到视图了&#xff0c;但涉及到了html我觉得还是需要重新回顾一下,,,,,, web开发技术栈一共有3门语言。分别是&#xff1a; HTML&#xff1a;译作超文本标记语言&am…

excle如何设置自动显示星期几

目录 一.目的 二.范例结果 三.处理方式 一.目的 excle依据日期&#xff0c;设置后自动显示星期几。 二.范例结果 三.处理方式 公式1TEXT(XXX,DDDD) 公式2TEXT(XXX,DDD)

小程序View点击响应传递多个参数

小程序开发中&#xff0c;view的点击事件是通过bindtap绑定的&#xff0c;比如&#xff1a; <view classpay-button bindtapgotoDetail id{{item.id}}>查看详情</view> 在js文件中是这样获取参数id的&#xff1a; gotoDetail: function(e) {var id e.currentTar…

Java提供了哪些API用于集合类的操作?

Java提供了丰富的API用于集合类的操作。这些API涵盖了各种集合类型&#xff0c;包括List、Set、Queue、Map等&#xff0c;以及它们各自的实现类&#xff0c;如ArrayList、LinkedList、HashSet、LinkedHashSet、PriorityQueue、HashMap、LinkedHashMap等。 以下是一些常用的Jav…