vuejs可排序错误(实现,jqueryUI,vuejs2)

时间:2019-05-21 19:26:19

标签: vue.js vuejs2 material-design jquery-ui-sortable materialize

我有一个用材料设计编写的html项目,并且正在使用vuejs进行交互。现在一切都很好,但是当我包括sortable(jQueryUI)并更改对象中项目的顺序时,就不允许更改某些顺序。我不知道是什么,为什么。你能帮我吗?

我一直在创建排序计算的数据,但这不起作用。

//Sortable instance
$("#brosurSayfalar").sortable({
        items: '.brosur-sayfa',
        cursor: 'move',
        opacity: 0.5,
        containment: '#brosurSayfalar',
        distance: 20,
        tolerance: 'pointer',
        stop: function () {
            var i = 0;
            $('#brosurSayfalar .brosur-sayfa').each(function (count, el) {
                var id = $(this).data("id");
                console.log(id);
                var currentRow = window.app.pages.filter(function (row) { return row.Id == id })[0];
                currentRow.order = i;
                $(this).find(".brosur-sayfa-no").html(i);
                i++;
            });
            window.app.$forceUpdate();
        }
    });
//Vue instance

        data: {
            pages: null
        },
        watch: {
            pages: {
                handler: function (newVal) {
                    sliderReRender();
                },
                deep: true
            }
        },
        computed: {
            sortedPages: function () {
                return this.pages.sort(function (a, b) { return a.order - b.order; });
            }
        },



//v-for instance

<div :class="isExists(item) ? 'brosur-sayfa tooltipped' : 'brosur-sayfa brosur-bos-sayfa dropzone tooltipped'" v-for="(item, i) in sortedPages" :data-index="i" :data-id="item.Id" data-position="bottom" :data-tooltip="exlanation(item.endTime, item.accepted)" data-html="true">

当我与可排序提供程序进行排序时,我希望它在dom中显示,但是在dom仍然相同的情况下,它的数据在变化。

0 个答案:

没有答案