Vue.js 嵌套的Vue。跨层拖动时，可拖动列表将中断

我想用Vue创建一个可拖动的嵌套列表，并使用Vue.draggable组件。然而，我一直在更新嵌套列表

渲染很好，当您停留在同一标高内时，拖动也很好。但跨层拖动似乎无法做到这一点（VueComponent.onDragStart中的错误）

html

{{element.name}
{{element.order}

{{elementDeep.name}{{elementDeep.order}


{{listString}}

Vue js

从“vuedraggable”导入可拖动
var folderOneReady=[
{  
“名称”：“LOREM IPSUM”，
"命令":一,，
“固定”：错误
},
{  
“名称”：“MAGNA ALIQUA”，
"命令":二,，
“固定”：错误
},
{
“名称”：“劳丹蒂姆酒庄”，
“说明”：[
{
“名称”：“注深一级”，
“命令”：31，
“固定”：错误
},
{
“名称”：“注深二级”，
“命令”：32，
“固定”：错误
},
{
“姓名”：“注级深三”，
“命令”：33，
“固定”：错误
}
],
“命令”：3，
“固定”：错误
},
{  
“姓名”：“坐在阿梅特”，
“命令”：4，
“固定”：错误
},
{  
“名称”：“尼莫”，
“命令”：5，
“固定”：错误
},
{  
“名称”：“ACCUSANTIUM”，
“命令”：6，
“固定”：错误
},
{  
“姓名”：“ESSE”，
“命令”：7，
“固定”：错误
},
{  
“姓名”：“多洛雷斯”，
“命令”：8，
“固定”：错误
}
];
导出默认值{
姓名：'你好'，
组成部分：{
拖拉的，
},
数据（）{
返回{
列表：folderOneReady，
是的，
IsDraging:错，
拖延拖延：错误
}
},
方法：{
onMove（{relatedContext，draggedContext}）{
const relatedElement=relatedContext.element；
const draggedElement=draggedContext.element；
返回（！relatedElement | |！relatedElement.fixed）&&！draggedElement.fixed；
}
},
计算：{
dragOptions（）{
返回{
动画：1，
组：'说明'，
已禁用：！this.editable，
鬼课：“鬼”
};
},
listString（）{
返回JSON.stringify（this.list，null，2）；
}
},
观察：{
IsDraging（新值）{
如果（新值）{
此.delayedDraging=true
返回
}
这个.$nextTick（（）=>{
this.delayedDraging=false
})
}
}
}

---

任何人都可以告诉我正确的方向吗？

这可能不是唯一的问题，但您需要设置列表道具或使用v-model作为嵌套的拖动对象 尝试以下方法：

---

就是这样！格雷西亚斯！

<template>
  <div class="fluid container">

    <div  class="col-md-6">
        <draggable class="list-group" element="ul" v-model="list" :options="dragOptions" :move="onMove" @start="isDragging=true" @end="isDragging=false"> 
          <transition-group type="transition" :name="'flip-list'">
            <li class="list-group-item" v-for="element in list" :key="element.order"> 

              <i :class="element.fixed? 'fa fa-anchor' : 'glyphicon glyphicon-pushpin'" @click=" element.fixed=! element.fixed" aria-hidden="true"></i>
              {{element.name}}
              <span class="badge">{{element.order}}</span>

              <draggable v-if="element.notes" class="list-group" element="ul" :options="dragOptions" :move="onMove">
                 <transition-group class="list-group" :name="'flip-list'">
                   <li class="list-group-item" v-for="elementDeep in element.notes" :key="elementDeep.order"> 
                      {{elementDeep.name}} <span class="badge">{{ elementDeep.order }}</span>
                  </li>
                </transition-group>
              </draggable>

            </li> 
          </transition-group>
      </draggable>
    </div>

    <div  class="list-group col-md-6">
      <pre>{{listString}}</pre>
    </div>

  </div>
</template>

<script>
import draggable from 'vuedraggable'

var folderOneReady = [  
   {  
      "name":"LOREM IPSUM",
      "order":1,
      "fixed":false
   },
   {  
      "name":"MAGNA ALIQUA",
      "order":2,
      "fixed":false
   },
    {
      "name": "DOLOREM LAUDANTIUM",
      "notes": [
         {
           "name": "Note level deep One",
            "order":31,
            "fixed":false
         },
          {
           "name": "Note level deep two",
            "order":32,
            "fixed":false
         },
         {
           "name": "Note level deep deep three",
            "order":33,
            "fixed":false
         }
       ],
       "order":3,
       "fixed":false
    },
   {  
      "name":"SIT AMET",
      "order":4,
      "fixed":false
   },
   {  
      "name":"NEMO",
      "order":5,
      "fixed":false
   },
   {  
      "name":"ACCUSANTIUM",
      "order":6,
      "fixed":false
   },
   {  
      "name":"ESSE",
      "order":7,
      "fixed":false
   },
   {  
      "name":"DOLORES",
      "order":8,
      "fixed":false
   }
];

export default {
  name: 'hello',
  components: {
    draggable,
  },
  data () {
    return {
      list: folderOneReady,
      editable:true,
      isDragging: false,
      delayedDragging:false
    }
  },
  methods:{
    onMove ({relatedContext, draggedContext}) {
      const relatedElement = relatedContext.element;
      const draggedElement = draggedContext.element;
      return (!relatedElement || !relatedElement.fixed) && !draggedElement.fixed;
    }
  },
  computed: {
    dragOptions () {
      return  {
        animation: 1,
        group: 'description',
        disabled: !this.editable,
        ghostClass: 'ghost'
      };
    },
    listString(){
      return JSON.stringify(this.list, null, 2);  
    }
  },
  watch: {
    isDragging (newValue) {
      if (newValue){
        this.delayedDragging= true
        return
      }
      this.$nextTick( () =>{
           this.delayedDragging =false
      })
    }
  }
}
</script>

<draggable v-if="element.notes" class="list-group" element="ul" :options="dragOptions" :move="onMove" :list="element.notes">