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

Question

我在用Vue js 1.0.25.

我想创建一个list使用dynamic textboxes.其基本思想是在点击添加答案按钮,就应该建立一个dynamic text-box与它一起index像数答1和一个删除按钮.

用户最多可以添加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上查看