背景：
我正在研究基于Vue的项目-内容编辑器页面，用户可以在其中插入不同种类的块，例如文本块，图像块，视频块，从而形成一个完整的页面。
我的解决方案是使用块数组，我只需使用v-for进行渲染即可，并且效果很好。
有时候，我的用户需要对块进行重新排序，所以我上面有两个按钮，可以上下移动块。除了视频阻止之外，它也没有任何问题。
此视频块包含YouTube嵌入式iframe。
问题：
每次我向下移动视频块-靠近阵列的末端-重新加载视频。如果它向上移动-它会继续播放并且不会重新加载。
所以基本上，我在其中一个块中通过v-for和YouTube视频渲染了数组：
<div v-for="item in items" v-bind:key="item" class="block">
为演示该问题，我准备了此demo。
重现问题的步骤：
当块向下移动时，Vue似乎重新创建了此DOM。
尝试过的解决方案：
我认为这是因为我使用3rd party library嵌入了视频，但是没有-即使直接嵌入iframe，问题仍然存在。
我还尝试渲染没有动画的块列表，这也无济于事。
我试图重新编写用于重新排列数组中项目的方法，实际上我在演示中有两个版本，但是两者的工作方式相同。
所以我不知道为什么会发生这种情况，也许有人可以给我建议或解释幕后发生的事情？
答案 0 :(得分：3)
这不一定是Vue问题； it's impossible to move an iframe around in the DOM without it reloading。
即使您使用error: 'SumElements' undefined near line 11 column 19
error: called from
powelents at line 11 column 17
保留iframe元素，当Vue在DOM中移动它时，它也会重新加载。
尝试使用CSS flexbox命令来移动项目：updated demo。