Vue js добавляет динамические поля в список с удалением и сортировкой не работает

Я использую Vue js 1.0.25.

Я хочу создать list с помощью dynamic textboxes. Основная идея заключается в нажатии кнопки Добавить ответ, она должна создать dynamic text-box вместе со своим номером index, например Ans 1, а с помощью Удалить кнопка.

Пользователь может добавить максимум 5 ответов. А также пользователь может re-order ответить, используя метку Ответ в качестве обработчика. Я использую jQuery Sortable как Vue directive для сортировки ответов.

Кажется, все хорошо, здесь я создал JSFiddle для него: https://jsfiddle.net/devendragohil/6stotpaq/23/

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

Как я могу это исправить?

Ответ 1

Я не знаю, где вы выдаете, но я думаю, что это связано с jQuery Sortable. Я реплицирую ваш пример, используя vue-sortable, и он работает довольно Что ж.

Документы просты, короче, вам нужно добавить v-sortable в свой контейнер списка, и все остальное должно работать так, как у вас есть.

ИЗМЕНИТЬ

Как @g.annunziata упоминает об этом в своем комментарии, предыдущий пример не работает, если вы заказываете, а затем добавляете новый элемент.

Чтобы решить эту проблему, нам нужно также обновить массив данных, добавьте эти параметры в директиву v-sortable="{onUpdate: onUpdate }" и добавьте этот метод в vm

onUpdate: function (event) {
   var movingElement = this.answers.splice(event.oldIndex, 1)[0];
   this.answers.splice(event.newIndex, 0, movingElement);
}

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

Я не вникал в настоящую причину этого, но, как обходной путь, просто добавьте невидимый список элементов div after, что-то вроде этого.

<div class="list-group" v-sortable="{ handle:'.handle', onUpdate: onUpdate }">
  <div class="list-group-item" v-for="answer in answers">
    ...
  </div>
  <div style="display:none"></div>
</div>

Пример исправлен, см. http://jsbin.com/qinofow/edit?html,js,output

Ответ 2

Проблема заключается в том, как вы пытаетесь удалить элемент, эта строка здесь:

self.answerList.$remove(answer);

Это казалось хорошим местом, чтобы просто удалить выбранный элемент из массива, используя его индекс, и vuejs позволяет нам получить его при легко итерации.

Взгляните на рабочую скрипку здесь: https://jsfiddle.net/therealchiko/u9mjt5hd/2/, я изменил функцию, которая удаляет окно и обновляет параметры для цикла.

Ответ 3

Похоже, что когда пользовательский интерфейс обновляется при переупорядочении списка, массив не изменяется. Вы должны изменить его при изменении порядка.