Sortable的VueDraggable无法正常工作，并将选择的项目发送到init的第一个项目

问题描述

我在Nuxt项目中使用vue.draggable。我在某些页面和组件中使用了它，一切都很好。但是在我的一页上，这给了我一个愚蠢的问题！当页面被加载时，它将选择的项目发送到第一个！之后，一切正常！即使我选择并取消选择而不动，事情也能正常进行！！ 我试图检查选择的数组是否先移到正确的位置。它工作时，所选择的项目是第一次，如果数组，但如果让我选择别人比第一，2日尝试移动另一项目也！ 所以我有点卡住了。

这是代码： 顺便说一下，有些变量和方法像cmsListItems一样找不到。它们已全局添加到我的项目中

模板：

<draggable v-model="myItemsArray" @end="onEnd" @choose="onChoose" @unchoose="onUnChoose" v-bind="getoptions()">
    <transition-group type="transition" name="sortable_transition">
      <categorylistcard v-for="(category,index) in cmsListItems" 
      listtype="cat"
      :key="category.id" 
      :cat="category" 
      :index="index" 
      :showforsub="showForSub"
      :parentarr="parentArr"
      @addnewsub="addNewCat()"
      :sub="true"
      :sublvl="true"
      :sortable="true"
      :btntitle="lang.addsubcat"
      />
    </transition-group>
  </draggable>

脚本：

export default {
    data(){
      return{
        oldindex: '',newIndex: '',dragOptions: {
            ghostClass: "sortable_ghost",chosenClass: "sortable_chosen",handle: ".sortable_handle",disabled: false
        },isMoved: false,myItemsArray: [],originalItemsArray: [],choosedItem: null
      }
    },methods:{
          // ***** Reorder By Sorting *****\\

          this.isMoved = true
          this.oldindex = event.oldindex
          this.newIndex = event.newIndex
          console.log(this.myItemsArray[this.oldindex])
          console.log(this.myItemsArray[this.newIndex])
          if(this.oldindex !== this.newIndex){

            this.dragOptions.disabled = true
            let response = await this.axiosGet(`category/reorder/${this.originalItemsArray[this.oldindex].id}/${this.originalItemsArray[this.newIndex].id}`)
            if(this.resOk(response.status)){
                this.noty(ALERT_TYPE[1],'ok')
                this.originalItemsArray = this.myItemsArray
                this.isMoved = false
                this.dragOptions.disabled = false
                this.addClasstoMovedItems(this.oldindex)
                this.addClasstoMovedItems(this.newIndex)
                this.setCmsListItems(this.myItemsArray)
                // this part is my defected solution
                setTimeout(() => {
                  if(this.myItemsArray[this.oldindex].id === this.choosedItem.id || this.myItemsArray[0].id === this.choosedItem.id){
                    let arrayOfItems = [...this.originalItemsArray]
                    arrayOfItems.shift()
                    arrayOfItems.splice(this.newIndex,this.choosedItem)
                    this.setCmsListItems(arrayOfItems)
                    this.myItemsArray = [...this.cmsListItems]
                  }
                },50);
                // --------------------
            }else{
                this.isMoved = false
                this.myItemsArray = this.originalItemsArray
                this.dragOptions.disabled = false
                this.addClasstoMovedItems(this.oldindex)
                this.addClasstoMovedItems(this.newIndex)
            }

          }else{
            this.isMoved = false
            this.myItemsArray = this.originalItemsArray
            this.dragOptions.disabled = false
            this.addClasstoMovedItems(this.oldindex)
            this.addClasstoMovedItems(this.newIndex)
          }
          
      },addClasstoMovedItems(index){
          if((index == this.oldindex || index == this.newIndex) && this.isMoved == true){
              return 'sortable_moved'
          }else{
              return ''
          }
      }
    },async fetch(){
      this.btnLoading = true
      let response = await this.axiosGet(`categories/admin/0/1`)
      if(this.resOk(response.status)){
        if(this.notEmpty(response.data)){
          this.setCmsListItems(response.data.items)
          this.myItemsArray = [...this.cmsListItems]
          this.originalItemsArray = [...this.cmsListItems]
        }
        this.btnLoading = false
      }
    },}

解决方法

我有点破解它，所以我不推荐它！

我用@choose得到了选中的项目，并在我的@end中检查了数组的第一个索引是否是选中的项目unshift数组，并将选中的项添加到newIndex与splice()像下面这样：

setTimeout(() => {
  if(this.myItemsArray[this.oldIndex].id === this.choosedItem.id || this.myItemsArray[0].id === this.choosedItem.id){
    let arrayOfItems = [...this.originalItemsArray]
    arrayOfItems.shift()
    arrayOfItems.splice(this.newIndex,this.choosedItem)
    this.setCmsListItems(arrayOfItems)
    this.myItemsArray = [...this.cmsListItems]
    this.choosedItem = null
  }
},1);