Item disappears when moved to last last position.

[danieldevsquad]

I was just running a sample code:

<template>
    <div>
        <h1>Drag & Drop</h1>
        <div v-if="showLists" class="v-col--auto" v-for="list in lists" :key="list.label">
            <div class="panel">
                <div class="panel__heading">
                    <h3 class="">List of {{list.label}} (max. {{list.max}})</h3>
                </div>
                <div class="panel__body">
                    <vddl-list class="panel__body--list" :list="list.people"
                               :allowed-types="list.allowedTypes"

                               :inserted="handleInserted"
                               :dragover="handleDragover"
                               :drop="handleDrop"

                               :disable-if="list.people.length >= list.max">

                        <vddl-draggable class="panel__body--item" v-for="(person, index) in list.people"
                                        :key="person.name + person.key"
                                        :draggable="person"
                                        :type="person.type"
                                        :wrapper="list.people"
                                        :index="index"
                                        :disable-if="person.type === 'unknown'"
                                        effect-allowed="move"

                                        :selected="selectedEvent"
                                        :dragstart="handleDragstart"
                                        :dragend="handleDragend"
                                        :canceled="handleCanceled"
                                        :moved="handleMoved"

                                        :class="{'unknown': person.type === 'unknown'}">
                            {{person.name}}
                        </vddl-draggable>

                        <vddl-placeholder class="panel__placeholder">
                            Drop any <strong>{{list.allowedTypes.join(" or ")}}</strong> here
                        </vddl-placeholder>
                    </vddl-list>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import Vue  from "vue";
    import Vddl from "vddl";

    Vue.use(Vddl);

    export default {

        components: {},

        mounted() {
            window.vm = this;
        },

        data() {
            return {
                showLists: true,
                lists    : [
                    {
                        label       : "Men",
                        allowedTypes: [
                            "man"
                        ],
                        max         : 4,
                        people      : [
                            {
                                name: "Bob",
                                type: "man",
                                key : 0
                            },
                            {
                                name: "Charlie",
                                type: "man",
                                key : 0
                            },
                            {
                                name: "Dave",
                                type: "man",
                                key : 0
                            }
                        ]
                    },
                    {
                        label       : "Women",
                        allowedTypes: [
                            "woman"
                        ],
                        max         : 4,
                        people      : [
                            {
                                name: "Alice",
                                type: "woman",
                                key : 0
                            },
                            {
                                name: "Eve",
                                type: "woman",
                                key : 0
                            },
                            {
                                name: "Peggy",
                                type: "woman",
                                key : 0
                            }
                        ]
                    },
                    {
                        label       : "People",
                        allowedTypes: [
                            "man",
                            "woman"
                        ],
                        max         : 6,
                        people      : [
                            {
                                name: "Frank",
                                type: "man",
                                key : 0
                            },
                            {
                                name: "Mallory",
                                type: "woman",
                                key : 0
                            },
                            {
                                name: "Alex",
                                type: "unknown",
                                key : 0
                            },
                            {
                                name: "Oscar",
                                type: "man",
                                key : 0
                            },
                            {
                                name: "Wendy",
                                type: "woman",
                                key : 0
                            }
                        ]
                    }
                ]
            };
        },

        methods: {

            selectedEvent(item) {
                this.selected = item;
            },
            handleDragstart(item) {
                console.log(":v-draggable: dragstart", item);
            },
            handleDragend(item) {
                console.log(":v-draggable: dragend", item);
            },
            handleCanceled(item) {
                console.log(":v-draggable: canceled", item);
            },
            handleMoved(item) {
                console.log(":v-draggable: moved", item);

                const { index, list } = item;
                list.splice(index, 1);
            },

            handleInserted(item) {
                console.log(":v-list: inserted", item);
            },
            handleDragover(item) {
                console.log(":v-list: handleDragover", item);
            },
            handleDrop(data) {
                console.log(":v-list: drop", data);
                const { index, list, item } = data;

                item.key = new Date().getTime();
                list.splice(index, 0, item);
            }
        }
    };
</script>

[awulkan]

I had this problem as well and worked around it by toggling the list off and on again. Because my data was updated correctly, but it didn't re-render.

First, set a variable called listIsVisible on your root list container. Also, make the variable true by default. Then add this method and call it whenever you updated your list, for example in the handleDragend method.

forceListUpdate() {
  this.listisVisible = false;
  this.$nextTick(() => {
    this.listIsVisible = true;
  });
},

Ugly fix, but works for now.