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

Question

我正在使用 Vue js 1.0.25。

我想使用 dynamic textboxes 创建一个 list。基本思路是点击 Add Answer 按钮，它应该创建一个 dynamic text-box 及其 index 编号，例如 Ans 1 并带有删除按钮。

用户最多可以添加 5 个答案。并且用户还可以 re-order 使用 答案的标签作为处理程序 的答案。我使用 jQuery Sortable 作为 Vue directive 对答案进行排序。

看起来工作正常，我在这里为它创建了一个 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

似乎在重新排序列表时更新 UI 时，数组没有改变。当你改变顺序时，你应该重新排列它。

Answer 2

问题在于您尝试删除元素的方式，此处为这一行：

self.answerList.$remove(answer);

这似乎是一个很好的地方，可以使用索引从数组中简单地删除所选项目，vuejs 允许我们在轻松迭代时获取它。

看看这里的工作 fiddle：https://jsfiddle.net/therealchiko/u9mjt5hd/2/，我更改了删除框的函数并更新了 for 循环的参数。

Answer 3

我不知道您的问题出在哪里，但我认为它与 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，类似这样。

<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

查看

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

Vue js add dynamic fields in list with remove and sort not working

jquery

jquery-ui-sortable

vue.js