我有一个用材料设计编写的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仍然相同的情况下,它的数据在变化。