7

私は基本的な Vue.js オブジェクトを持っています:

var playlist = new Vue({
    el : '#playlist',
    data : {
        entries : [
            { title : 'Oh No' },
            { title : 'Let it Out' },
            { title : 'That\'s Right' },
            { title : 'Jump on Stage' },
            { title : 'This is the Remix' }
        ]
    }
});

HTML:

<div id="playlist">
    <div v-for="entry in entries">
        {{ entry.title }}
    </div>
</div>

また、ドラッグ アンド ドロップ ライブラリ (dragula) を使用して、ユーザーが #playlist div を再配置できるようにしています。

ただし、ユーザーが dragula を使用してプレイリストを再配置した後、この変更は Vue には反映されplaylist.entriesず、DOM にのみ反映されます。

ドラッグラ イベントにフックして、移動した要素の開始インデックスと終了インデックスを決定しました。新しい順序を反映するために Vue オブジェクトを更新する正しい方法は何ですか?

フィドル: https://jsfiddle.net/cxx77kco/5/

4

2 に答える 2

8

Vuev-forは、それが作成する DOM 要素への変更を追跡しません。そのため、dragula から変更が通知されたら、モデルを更新する必要があります。ここに実用的なフィドルがあります: https://jsfiddle.net/hsnvweov/

var playlist = new Vue({
    el : '#playlist',
    data : {
        entries : [
            { title : 'Oh No' },
            { title : 'Let it Out' },
            { title : 'That\'s Right' },
            { title : 'Jump on Stage' },
            { title : 'This is the Remix' }
        ]
    },
    ready: function() {
        var self = this;
        var from = null;
        var drake = dragula([document.querySelector('#playlist')]);

        drake.on('drag', function(element, source) {
            var index = [].indexOf.call(element.parentNode.children, element);
            console.log('drag from', index, element, source);
            from = index;
        })

        drake.on('drop', function(element, target, source, sibling) {
            var index = [].indexOf.call(element.parentNode.children, element)
            console.log('drop to', index, element, target, source, sibling);

            self.entries.splice(index, 0, self.entries.splice(from, 1)[0]);

            console.log('Vue thinks order is:', playlist.entries.map(e => e.title ).join(', ')
            );
        })
    }
});
于 2016-02-06T17:51:32.770 に答える
3

まさにこの仕事をする Vue ディレクティブを作成しました。

v-for ディレクティブとまったく同じように機能し、基礎となるビューモデル配列と同期してドラッグ アンド ドロップ機能を追加します。

例

構文:

<div v-dragable-for="element in list">{{element.name}}</div>

例: fiddle1、fiddle2

Github リポジトリ: Vue.Dragable.For

于 2016-07-01T17:56:35.677 に答える