Question

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

Im使用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>

删除后，Vue拖动的项目消失了

0 个答案: