[Vuejs]-The Vue was unable to invoke the API of JQuery UI

by

0👍

✅

I’ve been using Jquery UI and Vue js without compatibility issues. If you want to make a component draggable you’ll need to attach any handlers after vue has updated the DOM.

A component’s html element can be accessed via its $el property. From the Vue js Lifecycle Diagram we can see that $el will be available during the ready lifecycle hook.

Knowing this, we can make a component draggable() with the following code:

Vue.component('draggable-widget', {
    template: '#draggable-widget',

    ready: function() {
        $(this.$el).draggable();
    }
});

Here is a JSFiddle showing it in action.

Leave a comment