利用设置新数据存储结构解决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的状态数组。

【这一步可以称为是记录当前用户的折叠展开行为并记录到新增的那个数据结构中。