javascript - vue拖放后拖动的项目消失

Question

我试图有两个单独的 div，我可以将文章从一个 div 添加到另一个，但是当我尝试这样做时，我在控制台中收到此错误。我也在使用 laravel，我的另一个问题是我可以将其他值中的左 div（prof_added）详细信息作为表单发送给 laravel

我使用 Vue-draggable 2.16.0 和 vue 2.0.1

错误 ：

vuedraggable.js?bcd0:277 Uncaught TypeError: Cannot read property 'apply' of undefined
    at spliceList (eval at <anonymous> (app.js:152), <anonymous>:277:32)
    at VueComponent.alterList (eval at <anonymous> (app.js:152), <anonymous>:266:13)
    at VueComponent.spliceList (eval at <anonymous> (app.js:152), <anonymous>:279:16)
    at VueComponent.onDragAdd (eval at <anonymous> (app.js:152), <anonymous>:336:16)
    at Sortable.eval (eval at <anonymous> (app.js:152), <anonymous>:70:37)
    at _dispatchEvent (eval at <anonymous> (app.js:126), <anonymous>:1326:20)
    at Sortable._onDrop (eval at <anonymous> (app.js:126), <anonymous>:968:8)
    at Sortable.handleEvent (eval at <anonymous> (app.js:126), <anonymous>:1044:11)

我编译的 vue 文件：

<template>

  <div class="forceright col-md-12 ">
   <div class="forceright col-md-4  col-md-offset-right-1 ">

                    <div id="prof_skills" class="skilldiv">

                      <h3>Professional Skills</h3>
         <draggable class="drag-area" :list="profnew" :options="{animation:200, group:'status'}" :element="'article'" @add="onAdd($event, true)"  @change="update">
                    <article class="card alert alert-info skills" v-for="(profs, index) in profnew" :key="profs.prof_id" :data-id="profs.prof_id">
                        <header>
                            {{ profs.prof_skilldesc }}
                        </header>
                    </article>
                </draggable>   


</div>
</div>
 <div class="forceright col-md-4  col-md-offset-right-1 ">

                    <div id="prof_added" class="skilldiv">

                    <h3>Proffesional Skills Selected</h3>
        <draggable class="drag-area"  :list="profaddednew" :options="{animation:200, group:'status'}" :element="'article'" @add="onAdd($event, false)"  @change="update">

                </draggable>   


</div>
</div>


</div>   

</template>


<script>
  import draggable from 'vuedraggable'

    export default {
        components: {
            draggable
        },
        props: ['prof', 'profadded'],
        data() {
            return {
               profaddednew: this.profadded,
               profnew: this.prof
            }
        },
        methods: {
            onAdd(event) {
                let id = event.item.getAttribute('data-id');

            },
            update() {
                this.profaddednew.map((prof, index) => {
                    prof.order = index + 1;
                });

                this.profnew.map((prof, index) => {
                    prof.order = index + 1;
                });

                let profs = this.profaddednew.concat(this.profnew);


            }

        }
    }
</script>
<style>
 .drag-area{
     min-height: 10px;  
    }
</style>

和刀片页面

      <div id="app" name="profs">
       <info-list :profadded="{}" :prof="{{$prof}}"></info-list>
    </div>     
                    </div>

标签： javascriptlaravelvue.jslaravel-5.2vue-component