利用设置新数据存储结构解决vue中折叠面板双向绑定index引起的问题
问题背景是,在进行机器性能可视化的前端开发时,使用折叠面板将不同机器的性能图表画到不同的折叠面板上去。而机器的选择利用select下拉选项来筛选。
由于在折叠面板中,通过 如下v-model双向绑定了currentPanel变量,用于记录当前哪些面板是展开的。
v-model = "currentPanel"
并且在每个面板上将name绑定为选中的机器列表的index:
<Panel class="panel" v-for="(item,index) in chartList" :key="index" :name='`${index}`'>
而由于用户选中的机器列表是会变化的,导致无法将index固定映射到某一个机器(以IP地址作为唯一标示)上。
为解决这个问题,我的第一想法是将name不再绑定到index上而是直接绑定到nodeIp上。如下所示:
<Panel class="panel" v-for="(item,index) in chartList" :key="index" :name=“item.graphInfo.nodeIp”}`'>
这样以来,理论上讲就是将currentPanel双向绑定一个由nodeIp标识的列表,从而实现展开状态与机器的一一对应,而不再需要通过index这一相对位置来记录。
然而,现实很骨感,当实现这一思路并运行时出现了模版渲染在charList数据为空时控制台爆红的情况。尽管不影响正常使用,但作为宇宙条的一名小小实习生,还是无法忍受爆红的事实。
经mentor点拨最后选择引入一个单独的数据结构,专门用来存储机器列表的面板折叠状态:
[{nodeIp:'101.101.101', isOpen:true},{nodeIp:'102.102.102', isOpen:false}, ... ... ]
对于这个数组,简单解释一下:该数组只存储用户在select下拉框中选择的机器,而isOpen则记录改机器面板是否打开。
至此,对于面板的显示只需维护这个数据结构即可:
1)当用户选择或删除某个机器时,更新该数组,默认新增的机器isOpen = true;
2)当数组更新完成后,根据该数组去设置currentPanel中有哪些值,(凡是isOpen===true的机器,就把他在该数组中的下标push进currentPanel中)
【以上两步可称为是根据数组更新currentPanel】
3)当用户折叠或展开某个面板时,currentPanel数组会和原始方法一样增加或减少一个下标;这时就需要根据用户操作后的currentPanel去更新含isOpen的状态数组。
【这一步可以称为是记录当前用户的折叠展开行为并记录到新增的那个数据结构中。
利用设置新数据存储结构解决vue中折叠面板双向绑定index引起的问题的更多相关文章
- kafka 数据存储结构+原理+基本操作命令
数据存储结构: Kafka中的Message是以topic为基本单位组织的,不同的topic之间是相互独立的.每个topic又可以分成几个不同的partition(每个topic有几个partitio ...
- Berkeley DB的数据存储结构——哈希表(Hash Table)、B树(BTree)、队列(Queue)、记录号(Recno)
Berkeley DB的数据存储结构 BDB支持四种数据存储结构及相应算法,官方称为访问方法(Access Method),分别是哈希表(Hash Table).B树(BTree).队列(Queue) ...
- Android开发之利用SQLite进行数据存储
Android开发之利用SQLite进行数据存储 Android开发之利用SQLite进行数据存储 SQLite数据库简单介绍 Android中怎样使用SQLite 1 创建SQLiteOpenHel ...
- Cassandra 的数据存储结构——本质是SortedMap<RowKey, SortedMap<ColumnKey, ColumnValue>>
Cassandra 的数据存储结构 Cassandra 的数据模型是基于列族(Column Family)的四维或五维模型.它借鉴了 Amazon 的 Dynamo 和 Google's BigTab ...
- 利用POI工具读取word文档并将数据存储到sqlserver数据库中
今天实现了利用POI工具读取word文档,并将数据存储到sql数据库中,代码如下: package word; import java.io.File; import java.io.FileInpu ...
- 修改vue中的挂载页面(index.html)的路径
修改vue中的挂载页面(index.html)的路径 2019年03月30日 12:07:12 VegasLemon 阅读数 501 版权声明:本文为博主原创文章,未经博主允许不得转载. htt ...
- 利用Gson和SharePreference存储结构化数据
问题的导入 Android互联网产品通常会有很多的结构化数据需要保存,比如对于登录这个流程,通常会保存诸如username.profile_pic.access_token等等之类的数据,这些数据可以 ...
- Hashtable数据存储结构-遍历规则,Hash类型的复杂度为啥都是O(1)-源码分析
Hashtable 是一个很常见的数据结构类型,前段时间阿里的面试官说只要搞懂了HashTable,hashMap,HashSet,treeMap,treeSet这几个数据结构,阿里的数据结构面试没问 ...
- Redis之数据存储结构
今天去中关村软件园面试,被问到:你做项目用到的Redis处理数据用的什么结构?顿时石化,”用到的结构,不就是key-value嘛,还有什么结构?“.面试官说:“平时除了工作,要加强学习,下面的面试我觉 ...
随机推荐
- PAT Advanced 1004 Counting Leaves
题目与翻译 1004 Counting Leaves 数树叶 (30分) A family hierarchy is usually presented by a pedigree tree. You ...
- Docker 建站小记
一,前言 Docker 建站小记,我使用了四个镜像来搭建:nginx,certbot,mysql,gradle.欢迎访问:https://www.zzk0.top 这个网页是从 github 上找的个 ...
- 10_1_OS模块
1.常用函数目录 函数名 功能 os.name 指示用户正在使用的工作平台 os.getcwd ( ) 获取当前的工作目录 os.listdir ( ) 返回指定目录下的所有文件和目录名 os.rem ...
- cfsetispeed、cfsetospeed和cfsetspeed探究
在我https://www.cnblogs.com/Suzkfly/p/11055532.html这篇博客中有一个疑问,就是在串口设置波特率的域中,没有将输入输出波特率分开,那为什么会有几个不同的设置 ...
- Java并发组件二之CyclicBarriar
使用场景: 多个线程相互等待,直到都满足条件之后,才能执行后续的操作.CyclicBarrier描述的是各个线程之间相互等待的关系. 使用步骤: 正常实例化:CyclicBarrier sCyclic ...
- VirtualBox Guest Additions 下载地址以及简介
下载者可将以下链接粘贴到浏览器上,根据Vbox的版本找到自己对应的增强. http://download.virtualbox.org/virtualbox/5.0.10/ 虚拟机安装VBoxAddi ...
- 2021最新 Spring面试题精选(附刷题小程序)
推荐使用小程序阅读 为了能让您更加方便的阅读 本文所有的面试题目均已整理至小程序<面试手册> 可以通过微信扫描(或长按)下图的二维码享受更好的阅读体验! 目录 推荐使用小程序阅读 1. S ...
- loj10007线段
题目描述 数轴上有 n 条线段,选取其中 k 条线段使得这 k 条线段两两没有重合部分,问 k 最大为多少. 输入格式 第一行为一个正整数 n: 在接下来的 n 行中,每行有 2 个数 a_i,b_i ...
- 存储型XSS
DVWA系列(二)存储型XSS https://www.imooc.com/article/284686 网络安全:存储型XSS https://blog.csdn.net/qq_41500251/a ...
- Codeforces 1220D 思维 数学 二分图基础
原题链接 题意 我们有一个含多个正整数的集合B,然后我们将所有的整数,也就是Z集合内所有元素,都当做顶点 两个整数 \(i , j\) 能建立无向边,当且仅当 \(|i - j|\) 这个数属于B集合 ...