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

Question

我正在使用Vue js 1.0.25。

我想使用dynamic textboxes 创建一个list。基本思路是点击Add Answer按钮，它应该创建一个dynamic text-box及其index编号，如Ans 1和一个Remove强>按钮。

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

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

但是在重新排序后删除答案时，问题就开始了。 假设，添加任意五个答案，然后随机重新排序它们 尝试将它们一个一个删除，它会表现得很奇怪。

我该如何解决？

Answer 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，就像这样。

<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

Answer 2

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

self.answerList.$remove(answer);

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

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

Answer 3

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