Re-initialize after updating containers

[bhulsman]

Currently I'm settings options for vue-dragula in the ready callback of the main Vue file, like so:

var Vue = require('vue');

Vue.use(require('vue-dragula'));

new Vue({

    el: '#app',

    components: {
        'categories': require('./components/categories.vue'),
    }

    data: {
        // some data...
    },

    created: function () {

        Vue.vueDragula.options('categories', {
            // options...
        });

    }
});

But in another component, I have an update function for the categories, which requires me to re-initialize vue-dragula so new (or removed) containers are taken into account. In this case the categories are the bags/containers.

export default {

    data: function () {
        return {
            // some data...
        };
    },

    methods: {

        saveCategories: function () {

            // save categories to database
            // use this.$set('categories', response.data.categories); so update categories data of Vue instance
            // dragging doesn't anymore, re-init?

            Vue.vueDragula.options('categories', function () {
                // options again...
            });
        }
    }
}

How can I access Vue.vueDragula.options inside of a components method? this doesn't work, and I can't find anything related on Vue itself or vue-dragula.

This is probably not really an issue, but maybe the docs can be updated if you know how to do something like this.

[Astray-git]

You can put var Vue = require('vue'); in your categories component, to access Vue in methods.

If you use a same bag, I think you don't have to set options again. The first argument for options is a bagName. v-dragula directive will add new containers into the drake of a bag.

[bhulsman]

Currently I created an event in the main file, that I call from the component. I do get access to vue-dragula, but with the error below.

Uncaught (in promise) Error: Bag named: "categories" already exists.(…)

Maybe I should elaborate; see the HTML below.

<ul>
    <li v-for="category in categories">
        <ul v-dragula="category.children" bag="categories">
            <li v-for="subcategory in category.children">
                {{ category.name }}
            </li>
        </ul>
    </li>
</ul>

So the v-dragula should automatically add new containers in this situation?

Using this.$http.post('/api/categories', { categories: categories }) I'm saving the categories to the database. Then I use this.$set('categories', response.data.categories); to set output from the API back to Vue, after that I can't drag/drop anymore.

[Astray-git]

It's a bug in the unbind hook😫, the whole drake is destroyed after removing a container.
For now, you can clear the array first then set it in $nextTick...
(temporary 'hack')

this.categories = []
this.$nextTick(function () {
  this.categories = newCategories
})

[bhulsman]

Thanks for looking into this, I'll give the 'workaround' a try!