Vue.js /：ドラッグ可能に「V-モデル」を追加すると、私はここでVue.jsを使用して問題とライブラリVueDraggable（<a href="https://github.com/SortableJS/Vue.Draggable" rel="nofollow noreferrer">https://github.com/SortableJS/Vue.Draggable</a>） を持って、それドラッグ可能ではない

Question

なりますが、コードのサンプルです：

<draggable v-if="n === 2 && track.getDisplayArray()[1].length !==0" 
     element="ul" 
     :options="{group:'layers '+ track.itemId}" 
     v-bind:class="{ hidden: !track.show, 'child-container': track.show }" 
     v-model="track.getDisplayArray()[1]" 
     :move="onMove" 
     @start="onStart" 
     @end="onFinished"> 
     <li class="item" v-bind:class="{ hidden: !layer.show, child: layer.show }" 
      v-for="layer in track.getDisplayArray()[1]"> 
      <span>{{layer.name}}</span> 
      <img class="item-view" src="static/img/ic_view.svg" alt="view"> 
     </li> 
</draggable> 

「Vモデル」プロパティがここにある場合は、作成されたliタグはできません）

;

onMove機能だけで、ONSTARTをtrueを返し、空onFinishedある（しかし、私は将来的に彼らと何かをしたい） スワップされる。

このプロパティを削除すると、liタグを交換することができます。

問題が表示されますか？彼らは私が気付いていないいくつかのプロパティ間のいくつかの "葛藤"ですか？

Answer 1

私の問題の解決策が見つかりました。 v-modelをvalueに変更しても、リンクされているリストからの更新が表示されないため、何も変更されませんでした。

"v-model"プロパティをプロパティ "list"に置き換えました。ドキュメントによれば

：値 は不変であるのに対し

主な違いは、スプライスの方法を用いてドラッグ可能なコンポーネントによって更新されるリストプロップ あります。