DOM変更後のVueデータの更新方法

Question

VueJSと一緒にjQueryソート可能なプラグインを使用しています。プラグインはDOMを変更しますが、その変更はコンポーネントデータオブジェクトに反映されません。

私はリストとしてレンダリングされるオブジェクトの配列を持っています<li> HTML。ソート可能なプラグインは、これらのリストアイテムの順序を変更しますが、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 = [];）