Vue 手风琴 和 $set

   最近，在开发项目的时候，要做一个手风琴，要求能**同时展开多个面板**，喏，也就是Element-ui 折叠面板这个型的：

但需求是加了更改排序的功能，如下图，表现上自然不同了，先前提到的Element-ui折叠面板，满足不了，只能 DIY 一个。

接着，啪叽一顿代码下来，大体如下。这里的方法是：给已有的数据对象添加新的属性。
[color=#ff4753]*[/color]注：当然用 DOM、ref 的方法也能解决，但总感觉有种骑马上高速的感觉。

再来点击手风琴，发现没效果，但事件其实是响应的，当前项的 show 也是变化的，那为什么没反应呢？

想必你也想到了，没错，新增的属性数据不响应！！！

准确的说辞是：受 ES5 的限制，Vue.js 不能检测到对象属性的添加或删除。因为 Vue.js 在初始化实例时将属性转为 getter/setter，所以属性必须在 data 对象上才能让 Vue.js 转换它，才能让它是响应的。

找到问题，于是就顺藤摸瓜找到了 $set()：既可以新增属性,又可以触发视图更新。
提示：$set官档，跟 $set 组合的，还有 $delete，与此无关，暂时不表。

稍加修改，试试！卡拉 o-k [qq:95]！！！