sortable.js — проблема с обновлением данных Vue

Vue.js
sortable.js — проблема с обновлением данных Vue

от ошибки

В требовании мне нужно реализовать функцию перетаскивания, в которой я используюsortable.jsреализовать, но я обнаружил, что данные после перетаскивания не отображаются на странице.

Вкратце, например, исходный массив [1, 2, 3, 4]. После перетаскивания он становится [4, 1, 2, 3], но он не отображается в представлении. Озадачив меня, я начал изучать следующие вопросы и записывать их здесь

Проблема с обновлением массива Vue

Увидев вышеперечисленные проблемы, вы наверняка подумаете, что мой способ работы с массивами неправильный, ведь официальные документы четко указывают на несколько ям массивов.

Следующее относится к документации Vue Из-за ограничений JavaScript Vue не может обнаружить изменения в следующих массивах: 1. Когда вы используете индекс для прямой установки элемента массива, например: vm.items[indexOfItem] = newValue 2. При изменении длины массива, например: vm.items.length = newLength

Но на самом деле я избежал этой ямы, собственно реализация черезspliceРеализовано, это на самом деле не проблема.

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

Не по темеНа самом деле мыVueКнига массива используетsplice,pushи так далее,VueВсе были инкапсулированы, поэтому они могут начать обновление просмотра, если вы хотите узнать больше, вы можете прочитатьисходный код.

Принудительное обновление Vue — $forceUpdate()

Для этого Ю Да сказал, что вообще говоря, нам не нужно его использовать.Если нам нужно его использовать, 99,9% случаев - это наши собственные проблемы.

а также$forceUpdate()Функция состоит в том, чтобы заставить экземпляр повторно рендериться, но смущает то, что это не имеет никакого эффекта после того, как я его использую, я думаю, что использовал его неправильно, O__O "…

Аналогичный код выглядит следующим образом:

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

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

Ссылаться на:Woohoo.IMO OC.com/Q&A/platform…

последнее решение

На самом деле, для окончательного решения это исходит изsegmentfault, у меня еще есть сомнения, давайте говорить ерунду, давайте посмотрим на код

Сначала используйте данные глубокого копирования данных, которые используются здесь.sliceметод, затем пустой и, наконец, в$nextTickПрисвойте значение глубоко скопированного массива в . Наконец все в порядке.

Я предполагаю, что их два, длина массива не меняется, изменяется только длина массива,VueЕсли его не удается обнаружить, легко опровергнуть это предположение, ведь после попытки оно окажется не так.

это может бытьsortable.jsэта проблема

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

В заключение

Хоть проблема и решена, но конечная первопричина не найдена О__О "…

Но он также предоставляет один или два мощных способа обновления данных, вы можете попробовать его, когда вам понадобится использовать его позже (надеюсь, вы не будете его использовать).

Приветствую всех, кто обратил внимание на мой общедоступный номер ~ продуктовый магазин с интерфейсом ~

Категории