Vue.draggable: How to pass vm method to group pull/put option?

[fedenko]

Hi. I'm migrating my widget from nestedSortable to vue.
I have nested list and I need to limit list levels to 2. So I decided to use Sortable.js group put option. But how can I use a function in group put option with Vue.Draggable?

[David-Desmaisons]

Like this:

<template>
<draggable :list="locations" :options="draggableOptions">
    <li v-for="location in locations">
        {{ location.name }}
    </li>
</draggable>
</template>

<script>
    import draggable from 'vuedraggable';
    export default {

        components: {
            draggable,
        },

        data() {
            return{
                locations: [
                    {id: 1, name: "location1"},
                    {id: 2, name: "location2"},
                    {id: 3, name: "location3"}
                ],
                draggableOptions: {
                   group: {
                      name: 'qux',
                      put: function (to) {
                         return to.el.children.length < 4;
                      }
                   },
                },
            }
        },
    }
</script>

[fedenko]

Thank you, @David-Desmaisons!

[David-Desmaisons]

You´re welcome