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

发布于02月03日

我用Vue js 1.0.25.

我想用dynamic textboxes创建一个list.基本的 idea 是点击Add Answer按钮，它应该创建一个dynamic text-box和它的index号，比如Ans 1和一个Remove按钮.

用户最多可以添加5个答案.此外，用户还可以使用Answer's label as a handler获得re-order个答案.我用jQuery Sortable作为Vue directive来排序答案.

它似乎工作得很好，这里我为它创建了一个JSFIDLE:https://jsfiddle.net/devendragohil/6stotpaq/23/

但问题始于重新排序后删除答案.

我该怎么修？

推荐答案

我不知道你们的问题在哪里，但我认为它与jQuery Sortable有关.我用vue-sortable复制了你们的例子，它运行得很好.

文档很简单，简言之，你只需要在列表容器中添加v-sortable个，其他任何东西都应该按你现有的方式工作.

EDIT

正如@g.annunziata在 comments 中提到的，如果订购后再添加一个新项目，前面的示例不起作用.

为了解决这个问题，我们还需要更新数据数组，在指令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处查看