javascript-移动数组项时,嵌入式Youtube视频会在组件内部重新加载,使用v-for渲染
作者：互联网
背景：
我正在研究基于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.
标签：vue-js,youtube,vuejs2,javascript 来源： https://codeday.me/bug/20191108/2007433.html