Vue 手风琴 和 $set

原创 uptown 随笔 vue 96阅读 2019-04-18 23:44:02 举报

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

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

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

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

想必你也想到了,没错,新增的属性数据不响应!!!
准确的说辞是:受 ES5 的限制,Vue.js 不能检测到对象属性的添加或删除。因为 Vue.js 在初始化实例时将属性转为 getter/setter,所以属性必须在 data 对象上才能让 Vue.js 转换它,才能让它是响应的。

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

稍加修改,试试!卡拉 o-k !!!

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复