循环中更改数据的问题：它是 v-for 的功能还是组件的错误或我的代码的错误？

Posted 2023-02-23

【中文标题】循环中更改数据的问题：它是 v-for 的功能还是组件的错误或我的代码的错误？

【英文标题】：Issue with changed data in a loop: Is it a feature of v-for or a bug of a component or a bug of my code?

【发布时间】：2018-10-29 10:15:57

【问题描述】：

我使用vue-smooth-dnd，但在从另一个播放列表复制曲目后，我无法在一个播放列表中拖动曲目。

Here 是最少的代码 - 只需单击按钮即可将曲目从一个播放列表复制到另一个播放列表，然后尝试拖动两个播放列表中的任何曲目。结果，您会看到“Slow”播放列表中的曲目是可拖动的，但在“Electro”中则不能。

但是，如果您将第一个 :key 从 :key="playlistObj.playlistTitle" 更改为 :key="Math.floor(Math.random() * (100 - 1)) + 1"，则在第一个播放列表中拖动的曲目开始起作用。

它是 v-for 的功能还是我使用的组件的错误或我的代码的错误？

【问题讨论】：

就像您现在的代码一样，我可以在同一个播放列表中拖放。如果我尝试从一个播放列表拖到另一个播放列表，则永远不会调用 onDrop 方法。 “Draggables 可以在具有相同组名的容器之间移动。如果未设置，容器将不接受来自外部的拖动。” Source。我在这里做了一个分叉：codesandbox.io/s/kxqz54k2yo 我将 group-name="group" 添加到 Component 元素。

@JohanKarlsson 嗨！。感谢您的答复。我不需要将曲目从一个播放列表拖到另一个播放列表。我需要将曲目从“Slow”播放列表复制到“Electro”，我希望在“Electro”中获得可拖动的曲目，但它们不可拖动。复制曲目后，我可以只拖动“慢速”播放列表中的曲目。

【参考方案1】：

这是组件的问题，已经修复。