DOM 변경 후 Vue 데이터를 업데이트하는 방법

Question

VueJS와 함께 jQuery 정렬 가능 플러그인을 사용하고 있습니다. 플러그인은 DOM을 변경하지만 이러한 변경 사항은 내 구성 요소 데이터 객체에 반영되지 않습니다.

HTML로 목록 <li>으로 렌더링되는 객체의 배열이 있습니다. 정렬 가능한 플러그인은 해당 목록 항목의 순서를 변경하지만 vue 구성 요소 배열 순서는 변경되지 않습니다.

어떤 도움이 필요합니까?

Answer 1

Vue.js으로 정렬 가능한 통합을 담당 특별 타사 뷰 구성 요소가있다 : https://github.com/SortableJS/Vue.Draggable

그것은 자신에 일을하려고 대신이를 사용하는 것이 아마 최선의 방법은.

Answer 2

구성 요소 인스턴스를 변수로 선언하여 Vue 인스턴스를 가져옵니다.

var vm = new Vue({ 
el: '#app', 
components: { 
    'my-component': { 
     template: '#my-template', 
     data: function() { 
      return { 
       list: [], 
      }; 
     }, 
     ... 
    }, 
}, 

인스턴스 외부의 데이터에도 액세스 할 수 있습니다. 청취 한 변경 사항에 따라 데이터를 업데이트하면됩니다. Like vm.list = [];)