3

Background:

I'm working on Vue-based project - content editor page, where user able to insert different kind of blocks like text-block, image-block, video-block, together resulting in a complete page.

My solution is to have array of blocks, which I simply render using v-for and it works perfect.

Sometimes, my users need to re-order blocks, so I have two buttons on it, to move block Up and Down. It also works without any issues, except for video block.

This video-block includes YouTube embedded iframe.

The problem:

Every time I move video-block down - closer to array's end - video reloads. If it's moved up - it stays playing and not reloaded.

So basically I have array rendered via v-for and YouTube video inside one of the blocks:

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

To demonstrate the issue, I prepared this demo.

Steps to reproduce issue:

  • Run video inside block number 2
  • Move it Up, and you will see it still plays
  • Move it Down, and it will be reloaded

It looks like Vue re-creates this piece of DOM when block moved down.

Solutions tried:

I thought that this is because I used 3rd party library to embed video, but no - the issue persist even if I embed iframe directly.

I also tried to render my list of blocks without animation, and it also does not help.

I tried to re-write method which I used to re-order items in array, I actually have two versions in the demo, but both works in the same way.

So I have no idea why it happens and maybe someone can give me an advice or explain what happens under the hood?

xelblch
  • 699
  • 3
  • 11

1 Answers1

3

This isn't necessarily a Vue issue; it's impossible to move an iframe around in the DOM without it reloading.

Even if you use key to preserve the iframe element, when Vue moves it around in the DOM it'll reload.

Try using CSS flexbox order to move the items around instead: updated demo.

Decade Moon
  • 32,968
  • 8
  • 81
  • 101
  • Why it happens only when block moved down? – xelblch Dec 13 '18 at 09:49
  • It depends on how Vue moves DOM elements around when patching the DOM after a render. Perhaps when you move the block down Vue moves the element down, but when you move the block up it's the same as if you moved the previous block down so the block doesn't actually get moved by Vue (it just shifts up in the DOM because the previous element was shifted down). – Decade Moon Dec 13 '18 at 09:53
  • Seems like you right. I updated demo with two videos and tested - it behaves exactly like you explained. Thank you. – xelblch Dec 13 '18 at 10:04