jquery - Vue js 在列表中添加动态字段，删除和排序不起作用

Question

我正在使用 Vue js 1.0.25。

我想使用动态文本框 创建一个列表。基本思想是点击添加答案按钮，它应该创建一个动态文本框及其索引编号，如Ans 1 并带有一个删除 按钮。

用户最多可以添加 5 个答案。并且用户还可以使用答案标签作为处理程序重新排序答案。我使用 jQuery Sortable 作为 Vue 指令 对答案进行排序。

看起来工作正常，我在这里为它创建了一个 JSFiddle:https://jsfiddle.net/devendragohil/6stotpaq/23/

But the problem starts when removing an answer after reordering it. Suppose, add any five answers and then reorder them randomly and after that try to remove them one by one, it will behave strange.

我该如何解决？

Answer 1

我不知道您的问题出在哪里，但我认为它与 jQuery Sortable 有关 我使用 vue-sortable 复制了您的示例它工作得很好。

Docs 很简单，简而言之，您只需将 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，就像这样。

<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