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

我正在使用Vue js 1.0.25.

我想使用动态文本框创建一个列表.基本思想是单击添加应答按钮,它应该创建一个动态文本框及其索引号,如Ans 1和“删除”按钮.

用户最多可以添加5个答案.并且用户可以使用答案的标签作为处理程序重新排序答案.我正在使用jQuery Sortable作为Vue指令来排序答案.

似乎工作正常,这里我创建了一个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.

我该怎么解决？

解决方法

我不知道你在哪里发布,但我认为它与jQuery可排序相关我使用 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,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,output