Vue日历拖放，单击和过滤不起作用

Question

我目前有一个日历，可以很好地添加新元素。但是，当我将元素拖放到另一天时，该元素会在放置元素后触发click事件。

但是我可以向日历中添加新元素，但是一旦添加，就不能移动它们。

我正在使用以下依赖项：

"dependencies": {
    "@shopify/draggable": "^1.0.0-beta.8",
    "bootstrap-vue": "^2.0.0-rc.26",
    "luxon": "^1.17.1",
    "moment": "^2.24.0",
    "v-calendar": "^1.0.0-beta.16",
    "v-tooltip": "^2.0.2",
    "vue-cookie": "^1.1.4",
    "vue-datetime": "^1.0.0-beta.10",
    "vue-draggable": "^2.0.2",
    "vue-router": "^3.1.2",
    "weekstart": "^1.0.0"
}

有关此问题的简短视频，请参见：https://streamable.com/04l59

这是很多代码，但我试图过滤掉不相关的内容，以获得最重要的内容。

“我的剑”如下所示：

<div id="app">
    <calendar :dates="{{json_encode($dates)}}" :events="{{json_encode($events)}}"
                :range="{{json_encode($range)}}" :planners="{{json_encode($planners)}}"
                :absences="{{json_encode($arrAbsences)}}" :conditions="{{json_encode($condition_list)}}"
                :user="{{json_encode(auth()->user())}}" :phases="{{json_encode($phases)}}">
    </calendar>
</div>

（一切正常）

然后，这两个vue文件更加复杂。

calendar.vue是最大的文件，并且包含主要的日历对象。 https://pastebin.com/4bjP1miF

assignment.vue有一个无法移动或不能进行适当编辑的块（分配）（onclick有时有效，有时却不起作用。

<template>
    <div :class="classObject" :id="'assignment' + data.id" @click="showPopup" tabindex="0" v-bind:style="styleObject">
        {{data.contitions}}
        <div class="fc-content text-center">
            <span class="fc-title">
                {{data.customer}}
                '{{data.projectname}}'
                {{data.zipcode}}, {{data.city}}
                F{{data.number}}

<!--                <hr v-if="data.articles_filtered.length > 0" width="60%">-->
                <ul class="list-unstyled articles">
                    <li v-for="item in data.articles_filtered">
                        <span v-if="item.name === 'CHAPE' || item.name === 'HELLINGSCHAPE'">
                            {{ item.name }} ({{ item.pivot.quantity }})
                        </span>
                        <span v-else>
                            {{ item.name }} ({{ (item.pivot.thickness * item.pivot.quantity) }} m³)
                        </span>
<!--                        <hr width="20%">-->
                    </li>
                </ul>

            </span>
        </div>
    </div>
</template>

<script>
    import {Draggable} from '@shopify/draggable'
    import {Sortable} from '@shopify/draggable';

    export default {
        name: 'Assignment',
        created() {
            if (this.$bus) {
                this.$bus.$on('update-status', data => {
                    this.updateStatus(data);
                });
            }
        },
        mounted() {
            // const draggable = new Draggable(this.$el, {draggable: '.assignment', distance: '1000'});
            // draggable.on('drag:stop', (e) => this.update());
            // draggable.on('drag:start', (e) => console.log('start'));

            const sortable = new Sortable(this.$el, {
                draggable: '.assignment'
            });

            sortable.on('sortable:start', () => console.log('sortable:start'));
            sortable.on('sortable:sort', () => console.log('sortable:sort'));
            sortable.on('sortable:sorted', () => console.log('sortable:sorted'));
            sortable.on('sortable:stop', () => this.update());
        },
        props: [
            'data'
        ],
        data: function () {
            return {
                status: this.data.status
            }
        },
        computed: {
            classObject: function () {
                return {
                    done: this.status === 'done',
                    'assignment draggable fc-event fc-event-external fc-start m--margin-bottom-15': true
                }
            },
            styleObject : function () {
                let style = '';
                if (this.data.conditions) {
                    // There are conditions, let's check what conditions
                    const conditions = this.data.conditions;
                    const condition_list = new Map();

                    conditions.forEach(function(value) {
                        condition_list.set(value.id , value.color);
                    });
                    // Klant mail gestuurd met uitvoerdatum
                    if (condition_list.has(1)) {
                        style = 'border-top: 3px solid #'+condition_list.get(1)+';';
                    }
                    // Klant 2 weken vooraf telefonisch gecontacteerd
                    if (condition_list.has(2)) {
                        style = 'border-top: 3px solid #'+condition_list.get(2)+';';
                    }
                    // Klant daags voor uitvoering telefonisch gecontacteerd
                    if (condition_list.has(3)) {
                        style = 'border-top: 3px solid #'+condition_list.get(3)+';';
                    }
                }
                return style;
            }
        },
        watch: {
            status: function () {
                this.data.status = this.status;
                this.$bus.$emit('update-status', {'id': this.data.phase_id, 'status': this.status});
            }
        },
        methods: {
            showPopup() {
                console.log('Clicked.');
                var assignment = this;

                const modal = $('#modalAssignment');
                modal.find('#title').html(assignment.data.projectname + ' (Interventie ' + assignment.data.number);
                modal.find('#date').html(assignment.data.date);
                modal.find('#description').html(assignment.data.description);
                modal.find('#customer_name').html(assignment.data.customer);
                modal.find('#address').html(assignment.data.zipcode + ' ' + assignment.data.city);
                modal.find('#position').val(assignment.data.position);
                modal.find('#intervention').html(' (Interventie ' + assignment.data.number + ')');
                modal.find('#project_name').html(assignment.data.projectname);
                modal.find('#articles').html(assignment.getArticleString());
                $(assignment.data.conditions).each(function () {
                    $('#condition-' + this.id).bootstrapSwitch('state', true, true)
                });
                modal.find('#remarksPlanner').val(assignment.data.remarksPlanner);
                modal.find('#remarksPlannerPrivate').val(assignment.data.remarksPlannerPrivate);
                modal.find('#btn_phases').attr('href', '/projects/' + assignment.data.project_id + '/phases?phase_id=' + assignment.data.phase.id);
                modal.find('#btn_assignment').attr('href', '/projects/' + assignment.data.project_id + '/assignments/' + assignment.data.id);

                if (assignment.data.status === 'done')
                    modal.find('#btn_finish').html('Fase openzetten');
                else
                    modal.find('#btn_finish').html('Fase afwerken');

                modal.find('#btn_finish').off("click");
                modal.find('#btn_finish').click(function () {
                    $.ajax({
                        method: 'get',
                        url: '/phases/' + assignment.data.phase.id + '/status'
                    });
                    if (assignment.status === 'done')
                        assignment.status = 'planned';
                    else
                        assignment.status = 'done';
                    $('#modalAssignment').modal('hide');
                });

                modal.find('#remarksForm').attr('action', '/assignments/' + assignment.data.id + '/quickupdate');
                modal.find('#btn_delete').off('click');
                modal.find('#btn_delete').click(function () {
                    $.ajax({
                        method: 'get',
                        url: "/assignments/" + assignment.data.id + "/delete",
                    });
                    $(assignment.$el).remove();
                    assignment.$destroy();
                    $('#modalAssignment').modal('hide');
                });
                modal.modal();
            },
            update() {
                var app = this;
                let assignment = this;
                setTimeout(function () {
                    if (assignment.data.date === $(assignment.$el.parentElement).data('date') && assignment.data.team_id === $(assignment.$el.parentElement).data('team')) {
                        app.showPopup();
                    } else {
                        assignment.data.date = $(assignment.$el.parentElement).data('date');
                        assignment.data.team_id = $(assignment.$el.parentElement).data('team');
                        $(assignment.$el.parentElement).removeClass('draggable-dropzone--occupied');
                        $.post("/assignments/update", {
                            'date': $(assignment.$el.parentElement).data('date'),
                            'team': $(assignment.$el.parentElement).data('team'),
                            'assignment_id': assignment.data.id
                        });
                    }
                }, 500)
            },
            getArticleString() {
                var app = this;
                var text ='';

                $(app.data.locations).each(function (key, value) {
                    text+= '<p>'+this.name+ '</p>';
                    if(this.articles) {
                        text += '<ul>';
                        $(this.articles).each(function () {
                            if (this.name === 'CHAPE' || this.name === 'HELLINGSCHAPE') {
                                text += '<li>' + this.name + ' (' + this.pivot.quantity + ')' + '</li>';
                            } else {
                                text += '<li>' + this.name + ' (' + (this.pivot.thickness * this.pivot.quantity)+ 'm³)' + '</li>';
                            }
                        });
                        text += '</ul>';
                    }
                });
                return text;
            },
            updateStatus(data) {
                if (data.id === this.data.phase.id) {
                    this.status = data.status;
                }
            }
        }
    }
</script>

谁知道我的vue组件为何如此奇怪？