Фон:
Я работаю над проектом на основе Vue - страницей редактора контента, где пользователь может вставлять различные типы блоков, такие как текстовый блок, блок изображения, видео-block, в результате чего получается полная страница.
Мое решение состоит в том, чтобы иметь массив блоков, которые я просто визуализирую с помощью v-for, и он отлично работает.
Иногда моим пользователям необходимоизменить порядок блоков, так что у меня есть две кнопки, чтобы переместить блок вверх и вниз.Он также работает без каких-либо проблем, за исключением блока video .
Этот видеоблок включает встроенный iframe YouTube.
Проблема:
Каждый раз, когда я перемещаю видеоблок вниз - ближе к концу массива - видео перезагружается.Если он перемещается вверх - он продолжает играть и не перезагружается.
Так что в основном у меня есть рендеринг массива через v-for и видео YouTube внутри одного из блоков:
<div v-for="item in items" v-bind:key="item" class="block">
Чтобы продемонстрировать проблемуЯ подготовил это демо .
Шаги для воспроизведения вопроса:
- Запуск видео внутри блока № 2
- Переместите его вверх, и вы увидите, что он все еще играет
- Переместите его вниз, и он будет перезагружен
Похоже, Vue воссоздает этот кусок DOM, когда блок перемещается вниз.
Решения пробовали:
Я думал, что это потому, что я использовал стороннюю библиотеку для встраивания видео, но нет - проблема сохраняется дажеесли я встраиваю iframe напрямую.
Я также пытался отобразить мой список блоков без анимации, и это также не помогает.
Я пытался переписать метод, который я использовал для перезаписи.упорядочив элементы в массиве, у меня на самом деле есть две версии в демоверсии, но обе работают одинаково.
Так что у меня естьПонятия не имею, почему это происходит, и, возможно, кто-то может дать мне совет или объяснить, что происходит под капотом?