背景：

我正在研究基于Vue的项目-内容编辑器页面,用户可以在其中插入不同种类的块,例如文本块,图像块,视频块,从而形成一个完整的页面.

我的解决方案是使用块数组,我只需使用v-for进行渲染即可,并且效果很好.

有时,我的用户需要对块进行重新排序,所以我上面有两个按钮,可以上下移动块.它也可以正常工作,除了视频块.

该视频块包括YouTube嵌入式iframe.

问题：

每当我将视频块向下移动-靠近阵列的末端时-视频就会重新加载.如果它向上移动-它会继续播放并且不会重新加载.

因此,基本上我在其中一个块中通过v-for和YouTube视频渲染了数组：

<div v-for="item in items" v-bind:key="item" class="block">

为了演示该问题,我准备了此demo.

重现问题的步骤：

>在2号块内运行视频
>将其向上移动,您将看到它仍在播放
>向下移动,它将重新加载

看起来,当块向下移动时,Vue会重新创建此DOM.

尝试的解决方案：

我以为这是因为我使用3rd party library嵌入了视频,但是没有-即使直接嵌入iframe,问题仍然存在.

我还尝试渲染没有动画的块列表,这也无济于事.

我试图重新编写用于重新排列数组中项目的方法,实际上在演示中有两个版本,但是两者的工作方式相同.

所以我不知道为什么会发生这种情况,也许有人可以给我建议或解释幕后发生的事情？

解决方法:

这不一定是Vue的问题. it’s impossible to move an iframe around in the DOM without it reloading.

即使您使用键保留iframe元素,当Vue在DOM中移动它时,它也会重新加载.

尝试使用CSS flexbox命令来移动项目：updated demo.