大二暑期实习记录(一):处理组件绑定数据错误(数组解构,map()方法)
好家伙,搬砖
今天在做组件迁移(从一个旧平台迁移到一个新平台)的时候,发现了一些小小的问题:
1.错误描述:
在穿梭框组件中,使用"节点配置"方法添加数据的时候,左测数据选择框直接消失了
这里我们猜测一下,大概是数据处理出了问题
此处,我们使用"数据绑定"绑定数据方法:
定义数据:
绑定数据
2.错误分析
此时我们去看看"节点配置"方法和"数据绑定"绑定的数据长什么样子
后面对比两组数据
options variablee
到这里大概能看出问题来了,显然左边的数据多包了一层"model"
大概写个map()就能搞定
3.源码定位
那么,我们去翻该组件的源码:
哇塞,公司的人能敲出这么漂亮的组件,真是太厉害了
.....
emmmm...
Element-UI,不愧是你啊
好了,回到正题
4.修改错误
此处我们直接定位到数据相关的核心部分
组件绑值
:data="(dataType == 'def' ? optionConfig : options)"
("def"对应"节点配置","cus"对应"数据绑定")
数据props:
props: {
optionConfig: {
type: [String, Object, Array],
default: () => {
return []
}
},
options: {
type: [Array, String, Object],
default: () => {
return []
}
},
}
也就是说,此处options中的数据没有经过处理就直接拿去使用了,那么我们只需要加上处理就好
我们使用计算属性,对数据进行一个预处理
computed: {
optionsnext: {
get() {
let temp = [];
temp = this.options?.map((item) => {
return {
...item,
disabled: item.model["disabled"],
key: item.model["key"],
label: item.model["label"],
};
}) ?? []
return temp;
}
},
}
随后再把它绑上
:data="(dataType == 'def' ? optionConfig : optionsnext)"
看看效果,
搞定!
5.代码解释
computed: {
optionsnext: {
get() {
let temp = [];
temp = this.options?.map((item) => {
return {
...item,
disabled: item.model["disabled"],
key: item.model["key"],
label: item.model["label"],
};
}) ?? []
return temp;
}
},
}
5.1.问:此处"?"和"??"的作用分别是什么,为什么要这样写?
答:
?.
(可选链操作符)用于在访问属性或调用方法之前,先判断对象是否为null或undefined。
如果对象为null或undefined,就会短路返回undefined,而不会继续执行后续的属性访问或方法调用。
这样可以避免在空值上尝试访问属性或调用方法时出现错误,简化了代码的写法和错误处理。
??
(空值合并操作符)用于在变量为空(null或undefined)时,提供一个默认值。
当左侧的值为null或undefined时,空值合并操作符会返回右侧的默认值。如果左侧的值不为空,则返回左侧的值。
这样的写法避免了抛出异常。
5.2.问:...item的作用?
...item
的作用是使用对象展开运算符将 item
对象的属性和值依次展开到新的对象中。
这样可以创建一个新的对象,其中包含了原始对象的所有属性及其对应的值。
...item
是一种简洁的写法,能够快速复制对象的属性和属性值。
它在使用对象字面量创建新的对象时很常用,可以方便地克隆或创建新的对象,而不改变原始对象的引用。
大二暑期实习记录(一):处理组件绑定数据错误(数组解构,map()方法)的更多相关文章
- Angular4.x 创建组件|绑定数据|绑定属性|数据循环|条件判断|事件|表单处理|双向数据绑定
Angular4.x 创建组件|绑定数据|绑定属性|数据循环|条件判断|事件|表单处理|双向数据绑定 创建 angular 组件 https://github.com/angular/angular- ...
- vuex2.0.0爬坑记录 -- mutations的第一个参数state不能解构
今天在学习vuex的过程中,遇到了一个很困扰人的问题,最终利用vuex的状态快照工具logger解决了问题. 问题是这样的,我在子组件中使用了mapState()函数来将状态映射至子组件中,使子组件能 ...
- IOS组件绑定无效错误
报错的原因:界面按钮事件没有绑定到源代码或者相关的代码被注释了.比如你的button组件以及绑定到IBOutlet,但是viewcontrol.m上没有相关的代码,就会出现异常.
- Vue组件之间数据交互与通信
Vue 的组件作用域都是孤立的,不允许在子组件的模板内直接引用父组件的数据.必须使用特定的方法才能实现组件之间的数据传递. 一.父组件向子组件传递数据 在 Vue 中,可以使用 props 向子组件传 ...
- ES6入门之变量的解构赋值(二)
前言 在上一章 ES6入门之let和const命令中我们对ES6的相关语法已经有了初步了解,上一章中我们主要学习了三大部分的内容,let命令的使用,块级作用域,const命令的使用,那么从本篇博客将进 ...
- ES6 变量与解构(二)
一.变量的声明与使用 [测试示例需要在node环境中测试,浏览器环境下并不完全兼容ES6代码]ES6中可以使用 {} 来包含任意一段代码,被 {} 包裹的内容称为一个代码块(局部作用域) let关键字 ...
- vue单文件组件形成父子(子父)组件之间通信(vue父组件传递数据给子组件,子组件传递数据给父组件)
看了很多文章,官网文档也有看,对父子组件通信说的不是很明白:决定自己总结一下: vue一般都使用构建工具构建项目:这样每个组件都是单文件组件:而网上很多文章都是script标签方式映入vue,组件通信 ...
- 化学专业大二转战Android开发,终于拥有了鹅厂暑期实习offer
我是双非学校,应用化学专业,一年前我大二,现在我大三.一年前我两手空空,现在我拥有了鹅厂暑期实习的offer. 虽然结果是好的,但我春招实习的道路远没有这么简单和辉煌,它是无比坎坷的:每个人应该量力而 ...
- 杂记:腾讯暑期实习 Web 后端开发面试经历
今天面试(一面)腾讯暑期实习 Web 后端开发,一言难尽. 第一部分,常规的自我介绍. 介绍完,面试官问我对人工智能有什么理解?深度学习和机器学习的区别?对调参有什么见解?语音识别中怎样运用了机器学习 ...
- 我的阿里、腾讯暑期实习Offer经历
三四月份对我拿来说是个忙碌的两个月,实验室项目到了关键的时刻,自己又需要抽身去找暑期实习,总之过得很快.值得欣慰的是幸运的拿到了阿里和腾讯的暑期实习offer,也算是对三四月份的忙碌一些回报吧.阿里的 ...
随机推荐
- [OpenCV-Python] 24 模板匹配
文章目录 OpenCV-Python:IV OpenCV中的图像处理 24 模板匹配 24.1 OpenCV 中的模板匹配 24.2 多对象的模板匹配 OpenCV-Python:IV OpenCV中 ...
- go测试库之apitest
前言 使用go语言做开发差不多快一年了,主要用来写后端Web服务,从一开始吐槽他的结构体,比如创建个复杂的JSON格式数据,那是相当的痛苦.还有 err 处理写的巨麻烦. 当然,go 也有爽的地方,创 ...
- MySQL(Zip版)安装配置
MySQL官网下载地址:MySQL 将压缩包内文件夹解压至任意目录,以mysql-5.7.40版本为例 第一步 添加环境变量 将mysql-5.7.40-winx64文件夹内的bin文件夹添加到环境变 ...
- 开发 Diffusers 库的道德行为指南
我们正在努力让我们每次发布的库更加负责! 我们很荣幸宣布我们发布了 道德守则,并将作为一部分其放入 Diffusers 库的说明文档. 由于扩散模型在现实世界上的实际应用例子会对社会造成潜在的负面影 ...
- 2022-10-27:设计一个数据结构,有效地找到给定子数组的 多数元素 。 子数组的 多数元素 是在子数组中出现 threshold 次数或次数以上的元素。 实现 MajorityChecker 类
2022-10-27:设计一个数据结构,有效地找到给定子数组的 多数元素 . 子数组的 多数元素 是在子数组中出现 threshold 次数或次数以上的元素. 实现 MajorityChecker 类 ...
- 2021-10-21:Excel 表列序号。给你一个字符串 columnTitle ,表示 Excel 表格中的列名称。返回该列名称对应的列序号。示例 1:输入: columnTitle = “A“,
2021-10-21:Excel 表列序号.给你一个字符串 columnTitle ,表示 Excel 表格中的列名称.返回该列名称对应的列序号.示例 1:输入: columnTitle = &quo ...
- 下载与安装Node.js
下载与安装Node.js 1.下载安装包 Node.js 官方网站下载:https://nodejs.org/en/ 2.安装 这边安装就直接next 安装好后它会自动配置好环境变量 这是我们来到命令 ...
- < Python全景系列-9 > Python 装饰器:优雅地增强你的函数和类
欢迎来到我们的系列博客<Python全景系列>第九篇!在这个系列中,我们将带领你从Python的基础知识开始,一步步深入到高级话题,帮助你掌握这门强大而灵活的编程语法.无论你是编程新手,还 ...
- 03. 选择器补充及CSS动画
1.了解frameset 2.iframe html5新特性 iframe 元素会创建包含另外一个文档的内联框架(即行内框架). 提示:您可以把需要的文本放置在 <iframe> 和 &l ...
- Java 网络编程 —— 客户端协议处理框架
概述 Java 对客户程序的通信过程进行了抽象,提供了通用的协议处理框架,该框架封装了 Socket,主要包括以下类: URL 类:统一资源定位符,表示客户程序要访问的远程资源 URLConnecti ...