어레이 항목을 이동할 때 v-for와 함께 렌더링되는 구성 요소 내부에 포함된 Youtube 비디오 다시 로드

어레이 항목을 이동할 때 v-for와 함께 렌더링되는 구성 요소 내부에 포함된 Youtube 비디오 다시 로드

배경:

나는 사용자가 텍스트 블록, 이미지 블록, 비디오 블록과 같은 다양한 종류의 블록을 함께 삽입하여 완전한 페이지를 만들 수 있는 Vue 기반 프로젝트 - 컨텐츠 편집기 페이지에서 일하고 있다.

내 해결책은 v-for를 사용하여 단순히 렌더링하는 블록의 배열로 완벽히 작동하는 것이다.

때때로 내 사용자들은 블록을 재주문해야 하기 때문에 나는 블록을 위아래로 이동시키기 위해 두 개의 버튼을 가지고 있다.비디오 블록을 제외하면 문제없이 작동하기도 한다.

이 비디오 블록에는 유튜브 임베디드 iframe이 포함되어 있다.

문제:

비디오 블록을 아래로 이동할 때마다 - 어레이의 끝에 더 가까이 - 비디오 다시 로드.위로 이동하면 계속 재생되고 다시 로드되지 않는다.

기본적으로 v-for와 YouTube 비디오를 통해 렌더링된 어레이를 블록 중 하나 안에 가지고 있다.

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

그 문제를 증명하기 위해 나는 이 데모를 준비했다.

문제를 재현하는 단계:

• 2번 블록 안에서 비디오 실행
• 위로 이동하면 계속 재생되는 것을 볼 수 있다.
• 아래로 이동하면 다시 로드됨

Vue는 블록이 아래로 이동했을 때 이 DOM 조각을 다시 만드는 것처럼 보인다.

시도된 솔루션:

나는 이것이 내가 iframe을 직접 내장해도 문제가 지속되는 비디오 임베드에는 타사 라이브러리를 사용했기 때문이라고 생각했다.

나도 내 블록 리스트를 애니메이션 없이 렌더링하려고 했는데, 그것도 도움이 안 돼.

아이템을 배열로 재주문할 때 사용했던 방식을 다시 쓰려고 했는데, 실제로 데모 버전에는 두 가지 버전이 있지만 둘 다 같은 방식으로 작동한다.

그래서 나는 왜 그런 일이 일어나는지 전혀 모르겠고 어쩌면 누군가가 나에게 조언을 해주거나 어떤 일이 일어났는지 설명해줄 수 있을까?

이것은 반드시 Vue의 문제는 아니다; 다시 로드하지 않고서는 DOM에서 iframe을 움직이는 것은 불가능하다.

사용해도keyiframe 요소를 보존하기 위해 Vue가 DOM에서 이 요소를 이동하면 다시 로드된다.

CSS flexbox 순서를 사용하여 업데이트된 데모 대신 항목을 이동하십시오.

참조URL: https://stackoverflow.com/questions/53752281/embedded-youtube-video-reloads-inside-component-rendered-with-v-for-when-movin