如何在Vue.js中按顺序保持可排序的数组和组件

Question

如何在Vue.js中按顺序保持可排序的数组和组件

rev*_*101 6 javascript drag-and-drop vue.js

我正在使用Vue.js和Dragula来制作拖放平铺页面.每个磁贴都包含自己的数据集,因此每个磁贴都是Vue组件.

问题是,一旦我拖放其中一个磁贴,Vue实例中的DOM元素和数据数组就会失去同步并开始引发问题.只是拖放不会产生问题,但是一旦我拖放某些内容然后尝试删除它,一切都会出错.

这是一个小提琴:https://jsfiddle.net/wfjawvnL/13/

这是我的HTML,包含组件模板:

<body>
  <div id="app">
    <div id="draggable" class="wrapper">
      <template v-for="(index, item) in list">
        <block :id="index" :index="index" :item="item" :name="item.name">
        </block>
      </template>
    </div>
    <div class="footer">
      <pre>{{ $data | json }}</pre>
    </div>
  </div>
</body>

<template id="block-template">
  <div :id="index" :class="[name, 'block']">
    <div class="text name">{{ name }}</div>
    <div>Index: {{ index }}</div>
    <span class="delete" v-on:click="removeItem(item)">&#x2717;</span>
  </div>
</template>

Run Code Online (Sandbox Code Playgroud)

这是我的Vue实例:

var vm = new Vue({
    el: '#app',

        data: {
        list: [
        {name: 'item1'},
        {name: 'item2'},
        {name: 'item3'},
        {name: 'item4'},
        {name: 'item5'}
      ]
    },

    methods: {
        reorder: function (element, sibling) {
            var children = element.parentNode.querySelectorAll(".block");

            var length = this.list.length;

            var ids = [];

            for (var i = 0; i < length; i++) {
                if (children[i].id) {
                    ids.push(children[i].id);
                }

                children[i].id = i;
            }

            var vm = this;

            var newArr = ids.map(function (id) {
                return vm.list[id];
            });

            this.list = newArr;
        }
    }
});

Run Code Online (Sandbox Code Playgroud)

这是组件:

Vue.component('block', {
    template: '#block-template',  

    props: ['index', 'name', 'item'],

    methods: {
        removeItem: function (item) {
           vm.list.$remove(item);
        }
    }
});

Run Code Online (Sandbox Code Playgroud)

我这样叫Dragula:

dragula([document.getElementById('draggable')]).on('drop', function (el, target, source, sibling) {
    vm.reorder(el, sibling);
});

Run Code Online (Sandbox Code Playgroud)

这个小提琴工作正常,但不使用组件:https://jsfiddle.net/z2s83yfL/1/

Answer 1

rev*_*101 2

我有两个问题。首先，我绑定数组索引并将其用作 id。索引被更改，这也导致了 id 的更改。其次，在模板标签上使用 v-for 会导致一些问题。我将标签更改为 div，现在可以使用了。

工作小提琴：https://jsfiddle.net/wfjawvnL/18/

Vue 的东西：

Vue.component('block', {
    template: '#block-template',  

    props: ['name', 'item'],

    methods: {
        removeItem: function (item) {
           vm.list.$remove(item);
        }
    }
});

var vm = new Vue({
    el: '#app',

        data: {
        list: [
        {name: 'item1'},
        {name: 'item2'},
        {name: 'item3'},
        {name: 'item4'},
        {name: 'item5'}
      ]
    },

    ready: function() {
        var self = this;
        var from = null;
        var drake = dragula([document.querySelector('#draggable')]);

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

        from = index;
        });

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

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

Run Code Online (Sandbox Code Playgroud)

HTML 内容：

<body>
  <div id="app">
    <div id="draggable" class="wrapper">
      <div class="wrapper" v-for="item in list">
        <block :item="item" :name="item.name">
        </block>
      </div>
    </div>
    <pre>{{ $data | json }}</pre>
  </div>
</body>

<template id="block-template">
  <div :class="[name, 'block']">
    <div class="text name" v-on:click="removeItem(item)">{{ name }}</div>
    <span class="delete" v-on:click="removeItem(item)">&#x2717;</span>
  </div>
</template>

Run Code Online (Sandbox Code Playgroud)

归档时间：	9 年，6 月前
查看次数：	1549 次
最近记录：	9 年，6 月前