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

Question

我正在使用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/

  

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

我该如何解决？

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时，数组不会更改。您应该在更改订单时重新安排它。