Vue가 JQuery UI의 API를 호출 할 수 없습니다.

Question

JQuery UI에서 draggable()과 같은 일부 API를 사용하기를 바랍니다. 하지만 작동하지 않습니다. 가능한 원인은 Vue 호출에 $ .ui에 대한 null 객체가 있다는 것입니다. 이 점에 대해 몇 가지 경험을 나누시겠습니까?

Answer 1

저는 Jquery UI와 Vue js를 호환성 문제없이 사용하고 있습니다. 구성 요소를 드래그 할 수있게하려면 다음에 모든 핸들러를 첨부해야합니다. vue가 DOM을 업데이트했습니다.

구성 요소의 html 요소는 $el 속성을 통해 액세스 할 수 있습니다. Vue js Lifecycle Diagram에서 ready 수명주기 후크 중에 $el을 사용할 수 있음을 알 수 있습니다. 이를 아는

, 우리는 다음 코드를 사용하여 구성 요소 draggable()을 만들 수 있습니다

다음

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

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

는 행동을 보여주는 JSFiddle이다.