sortable.js - Vue data update problem

Speaking from a bug

In a demand, I need to implement a drag and drop feature, which I use sortable.jsto achieve, but I found that after I drag the data is not rendered on the page.

Briefly, for example, the original array is [1,2,3,4], then drag and drop, into a [4,1,2,3], but did not appear in the view, this is not I was puzzled, and began to explore these questions, look at this record

Vue array update problems

See the above questions, you would certainly think that the way I deal with the array does not, after all, official documents contain and identify several pit array

Vue below with reference to the document due to restrictions of JavaScript, Vue fluctuation can not be detected in the following array: 1. When you use an array index entry directly, for example: vm.items 2. When you modify the length of the array [indexOfItem] = newValue, For example: vm.items.length = newLength

But in fact, I avoided the pit, the actual implementation is through the splicerealization of this fact is not a problem.

const tempItem = me.tabs.splice(e.oldIndex, 1)[0]
me.tabs.splice(e.newIndex, 0, tempItem)
复制代码

Digression In fact, we Vueare using an array of books splice, pushand so on, Vuehave done a layer of packaging, so they can view updates departure, if want more in-depth understanding, you can read the source code .

Vue force a refresh - $ forceUpdate ()

For this, in particular greatly represented, in general, we do not need to use, if you need to use it, 99.9% of cases, their own problems.

The $forceUpdate()feature is forced to re-render instances, but embarrassing, then I have not used the effect, I think I was wrong, O__O "...

Similar code is as follows:

// 在控制变量改变的时候进行 强制渲染更新

let childrenRefs = this.$refs.elTabs.$children
this.$nextTick(() => {
  childrenRefs.forEach(child => child.$forceUpdate())
})
复制代码

Reference: www.imooc.com/wenda/detai...

The final solution

In fact, for a final solution, from segmentfault, I still feel doubt, and without further ado, we look at the code

First with a deep copy data, used here slicemethods and blanking, in the final $nextTickassignment array value out of a deep copy. Finally it.

I guess there are two, length of the array is the same, just change the length of the array, Vueundetectable for this conjecture, it is easy to be overthrown himself, after all, tried it, not like this.

It could be sortable.jsa problem

// 代码参考：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;
      });
    },
  });
}
复制代码

in conclusion

Although the issue is resolved, but ultimately did not find the root cause of O__O "...

But also provide twelve kinds of very strong way to refresh the data after they are needed can try (you do not wish to use)

I welcome everyone's attention - the front end of a large number of public grocery store ~

Reproduced in: https: //juejin.im/post/5cfef0246fb9a07ecf721aec