需求是做一个目录的和富文本的结合,目录可通过拖拉拽进行内容区的标题以及子元素变化。
右侧是平级数据结构,左侧需要转成树形结构。
也就是说本来两个组件共享同一个v-model的数据,现在需要进行一个中间层的处理,所以用到了下面说的watch。
目录用到的是vuedraggable + 递归组件 + computed的get,set。
首先需要监听来自富文本的平级数据结构value的变化,按之前的经验来说vuedraggable会提供数据更改的监听方法,但是他是直接操作的数据,官网demo用的computed。一级目录还好,但二级目录互相拖拽是没有触发set的。只能用deep watch监听到最新的,但是两个互相依赖的watch会造成死循环,烦的一批。
后来Google了下,发现早有个人提出过这个问题。
https://github.com/SortableJS/Vue.Draggable/issues/701
解决方案为:
计算属性:
elements: {
get() {
return JSON.parse(JSON.stringify(this.$store.state.nested.elements));
},
set(value) {
this.$store.dispatch<