背景:
我正在开发基于 Vue 的项目 - 内容编辑器页面，用户可以在其中插入不同类型的 block ，例如文本 block 、图像 block 、视频 block ，从而形成一个完整的页面。
我的解决方案是使用 block 数组，我使用 v-for 简单地渲染它，它完美地工作。
有时，我的用户需要重新排序 block ，所以我有两个按钮，用于向上和向下移动 block 。除了 video block 之外，它也可以正常工作。
此视频 block 包含 YouTube 嵌入式 iframe。
问题:
每次我将视频 block 向下移动 - 靠近阵列的末端 - 视频重新加载。如果它向上移动 - 它会继续播放而不是重新加载。
所以基本上我在其中一个 block 内通过 v-for 和 YouTube 视频渲染了数组:
<div v-for="item in items" v-bind:key="item" class="block">
为了演示这个问题，我准备了这个 demo .
重现问题的步骤:
- 在 block 号 2 内运行视频
- 将其向上移动，您会看到它仍在播放
- 将其向下移动，它将重新加载
当 block 向下移动时，看起来 Vue 重新创建了这 block DOM。
尝试过的解决方案:
我认为这是因为我使用了 3rd party library嵌入视频，但没有 - 即使我直接嵌入 iframe，问题仍然存在。
我也尝试在没有动画的情况下渲染我的 block 列表，但它也没有帮助。
我尝试重写我用来对数组中的项目重新排序的方法，实际上我在演示中有两个版本，但两者的工作方式相同。
所以我不知道为什么会这样，也许有人可以给我建议或解释幕后发生的事情？
最佳答案
这不一定是 Vue 问题； it's impossible to move an iframe around in the DOM without it reloading .
即使您使用 key 来保留 iframe 元素，当 Vue 在 DOM 中移动它时，它也会重新加载。
尝试使用 CSS flexbox order 来移动项目:updated demo .
关于javascript - 移动数组项时，嵌入式 Youtube 视频在组件内部重新加载，使用 v-for 渲染，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53752281/