VueJS - обнаружение изменений DOM в области действия VueJS при использовании sortableJS - PullRequest
Новая
       37

VueJS - обнаружение изменений DOM в области действия VueJS при использовании sortableJS

0 голосов
/ 20 мая 2019

Я пытаюсь использовать sortableJS с vueJS. Все работает нормально, но VueJS не может обнаружить изменения, которые сделаны в области действия sortableJS, так как сортируемый JS изменяет DOM напрямую.

Я передал 'this' из экземпляра vue в метод сортировки onEnd. Событие срабатывает, когда я перетаскиваю элемент на экране. Я получаю newIndex, а также oldIndex. Когда я меняю два индекса, изменения, сделанные в DOM, теперь как-то обнаруживаются, и элементы массива меняются местами дважды.

Мне нужен способ, с помощью которого я могу сказать Vue обнаруживать изменения, сделанные в DOM. Или решение, которое работает. 

onEnd: function(evt) {        
        self.showIcons = true;
        document.body.style.cursor = "unset";

        // changing order of items
        const oldIndex = evt.oldIndex;
        const newIndex = evt.newIndex;

        const tempTodos = JSON.parse(JSON.stringify(self.todos));
        const tempItem = tempTodos.slice(oldIndex, oldIndex+1);
        tempTodos.splice(oldIndex, 1);
        tempTodos.splice(newIndex, 0, ...tempItem);
        self.todos = tempTodos;

Фактический результат - Исходный массив - [1, 2, 3] Если я перетащу 3 и поменяю местами с 1, то новый массив поменяется местами дважды (один раз по onEnd и один раз по обнаружению DOM). Итак, новый массив - [2, 3, 1]

Ожидаемый результат - Исходный массив - [1, 2, 3] Если я перетащу 3 и поменяю местами с 1, то новый массив должен быть - [3, 2, 1]

...