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

Posted 2023-02-22

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

【英文标题】：Vue js add dynamic fields in list with remove and sort not working

【发布时间】：2017-05-25 21:28:14

【问题描述】：

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

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

我该如何解决？

【参考方案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

【讨论】：

好的。感谢您的回答。我会检查它，如果它对我有用，我会告诉你。

示例不起作用。如果我更改订单并添加一件商品后，请重新订购。

感谢@g.annunziata，这是一个很好的收获，请查看我编辑的答案并解决该问题。

【参考方案2】：

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

self.answerList.$remove(answer);

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

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

【讨论】：

让我检查并告诉你。

没有。同样的问题仍然存在。 1) 添加新答案时不应清除任何现有的答案文本框。 2）添加五个答案，通过将第 5 个文本框移动到第 2 个位置重新排列它们，然后将第 3 个文本框移动到第 4 个位置，然后开始删除第 5 个和第 4 个答案，依此类推。看看它不会正常工作。

【参考方案3】：

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

【讨论】：

是的，但我不知道怎么做？