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

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

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

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

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

  

    
{{item}}
  

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;
      });
    },
  });
}