Vue 无法调用 JQuery UI 的 API

Question

我希望使用一些来自 JQuery UI 的 API，例如 draggable()。但它不起作用。我发现可能的原因是 Vue 调用中有 $.ui 的空对象。您愿意分享一些这方面的经验吗？

Answer 1

我一直在使用 Jquery UI 和 Vue js，没有兼容性问题。如果您想让组件可拖动，则需要在 vue 更新 DOM 之后附加任何处理程序。

可以通过其$el 属性访问组件的html 元素。从Vue js Lifecycle Diagram 我们可以看到$el 将在ready 生命周期挂钩期间可用。

知道了这一点，我们可以用下面的代码制作一个组件draggable()：

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

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

这是一个JSFiddle 展示它的实际应用。