问题背景是,在进行机器性能可视化的前端开发时,使用折叠面板将不同机器的性能图表画到不同的折叠面板上去。而机器的选择利用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引起的问题的更多相关文章

  1. kafka 数据存储结构+原理+基本操作命令

    数据存储结构: Kafka中的Message是以topic为基本单位组织的,不同的topic之间是相互独立的.每个topic又可以分成几个不同的partition(每个topic有几个partitio ...

  2. Berkeley DB的数据存储结构——哈希表(Hash Table)、B树(BTree)、队列(Queue)、记录号(Recno)

    Berkeley DB的数据存储结构 BDB支持四种数据存储结构及相应算法,官方称为访问方法(Access Method),分别是哈希表(Hash Table).B树(BTree).队列(Queue) ...

  3. Android开发之利用SQLite进行数据存储

    Android开发之利用SQLite进行数据存储 Android开发之利用SQLite进行数据存储 SQLite数据库简单介绍 Android中怎样使用SQLite 1 创建SQLiteOpenHel ...

  4. Cassandra 的数据存储结构——本质是SortedMap<RowKey, SortedMap<ColumnKey, ColumnValue>>

    Cassandra 的数据存储结构 Cassandra 的数据模型是基于列族(Column Family)的四维或五维模型.它借鉴了 Amazon 的 Dynamo 和 Google's BigTab ...

  5. 利用POI工具读取word文档并将数据存储到sqlserver数据库中

    今天实现了利用POI工具读取word文档,并将数据存储到sql数据库中,代码如下: package word; import java.io.File; import java.io.FileInpu ...

  6. 修改vue中的挂载页面(index.html)的路径

    修改vue中的挂载页面(index.html)的路径 2019年03月30日 12:07:12 VegasLemon 阅读数 501    版权声明:本文为博主原创文章,未经博主允许不得转载. htt ...

  7. 利用Gson和SharePreference存储结构化数据

    问题的导入 Android互联网产品通常会有很多的结构化数据需要保存,比如对于登录这个流程,通常会保存诸如username.profile_pic.access_token等等之类的数据,这些数据可以 ...

  8. Hashtable数据存储结构-遍历规则,Hash类型的复杂度为啥都是O(1)-源码分析

    Hashtable 是一个很常见的数据结构类型,前段时间阿里的面试官说只要搞懂了HashTable,hashMap,HashSet,treeMap,treeSet这几个数据结构,阿里的数据结构面试没问 ...

  9. Redis之数据存储结构

    今天去中关村软件园面试,被问到:你做项目用到的Redis处理数据用的什么结构?顿时石化,”用到的结构,不就是key-value嘛,还有什么结构?“.面试官说:“平时除了工作,要加强学习,下面的面试我觉 ...

随机推荐

  1. 计算机网络安全 —— 非对称加密算法 RSA 和数字签名(二)

    一.非对称加密算法基本概念 在对称密钥系统中,两个参与者要共享同一个秘密密钥.但怎样才能做到这一点呢?一种是事先约定,另一种是用信使来传送.在高度自动化的大型计算机网络中,用信使来传送密钥显然是不合适 ...

  2. Java并发包源码学习系列:阻塞队列实现之ArrayBlockingQueue源码解析

    目录 ArrayBlockingQueue概述 类图结构及重要字段 构造器 出队和入队操作 入队enqueue 出队dequeue 阻塞式操作 E take() 阻塞式获取 void put(E e) ...

  3. 从零开始学spring源码之ioc预热:bean的拓展和beanProcessor注册

    上篇聊完了bean的解析,说起来做的事情很简单,把xml文件里面配置的标签全部解析到spring容器里面,但是spring做的时候,花了那么大代价去做,后面看看到底值不值得呢. 接下来看看prepar ...

  4. ovs-fields

    1. 字段匹配 精确匹配 field=value,如,nw_src=10.1.2.3. 按位匹配 field=value/mask,如,nw_src=10.1.0.0/255.255.0.0,nw_s ...

  5. Linux磁盘的分区操作

    1.Linux磁盘分区介绍 Linux磁盘分区主要有两种方式,一种是MBR,另一种是GPT.根据Linux磁盘分的大小,来选择一种分区方式. --MBR分区格式:最大支持 2 TB 的磁盘.--GPT ...

  6. The Node.js Event Loop, Timers, and process.nextTick()

    The Node.js Event Loop, Timers, and process.nextTick() | Node.js https://nodejs.org/uk/docs/guides/e ...

  7. loj10009钓鱼___vector的调试

    题目描述 在一条水平路边,有 n 个钓鱼湖,从左到右编号为1,2,...,n .佳佳有 h 个小时的空余时间,他希望利用这个时间钓到更多的鱼.他从1  出发,向右走,有选择的在一些湖边停留一定的时间( ...

  8. 深度学习论文翻译解析(十八):MobileNetV2: Inverted Residuals and Linear Bottlenecks

    论文标题:MobileNetV2: Inverted Residuals and Linear Bottlenecks 论文作者:Mark Sandler Andrew Howard Menglong ...

  9. Django(图书管理系统)#转

    自己虽然实现了, 但是写的太LOW了,为了不误导大家,推荐一篇好的博客 https://www.cnblogs.com/alice-bj/p/9114084.html

  10. hadoop知识点总结(一)hadoop架构以及mapreduce工作机制

    1,为什么需要hadoop 数据分析者面临的问题 数据日趋庞大,读写都出现性能瓶颈: 用户的应用和分析结果,对实时性和响应时间要求越来越高: 使用的模型越来越复杂,计算量指数级上升. 期待的解决方案 ...