【前端】sortable.js Vue 数组数据更新问题 数据跟页面不同步 深度复制

本文主要是介绍【前端】sortable.js Vue 数组数据更新问题 数据跟页面不同步 深度复制，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

先用一个数据深拷贝数据，这里使用了 slice 方法，然后置空，最后在 $nextTick 中赋值深拷贝出来的数组值。最后可以了。

猜测是vue没有检测到arr改变

解决方案  增加唯一不变的key

有相同父元素的子元素必须有独特的 key。重复的 key 会造成渲染错误。

<div id="sort"><div v-for="(item,index) in arrData" :key="item" ><div>{{item}}</div></div>
</div>

key 值是每一个 vnode 的唯一标识，依靠 key，我们可以更快的拿到 oldVnode 中相对应的节点。

解决方案2 深度复制 重新渲染页面

// 代码参考：https://segmentfault.com/q/1010000009672767
mounted : function () {var that = this;var sortable1 = new Sortable(document.querySelector('#topicNumBox'), {sort: true,animation: 300,onEnd: function (evt) {  //拖拽结束发生该事件that.questionData.splice(evt.newIndex, 0, that.questionData.splice(evt.oldIndex, 1)[0]);//主要是这一步var newArray = that.questionData.slice(0);that.questionData = [];that.$nextTick(function () {that.questionData = newArray;});},});
}

这篇关于【前端】sortable.js Vue 数组数据更新问题 数据跟页面不同步 深度复制的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---