QUASAR/VueJS | Рендеринг реактивных комментариев вызывает сбой системы

На странице присутствует iframe с youtube-видео и компонент с комментариями.

<template lang="pug">
div.row.bg-primary
  q-video(:ratio="16/9" :src="url" )
  q-item(v-for="comment of comments" :key="comment.id" )
    CommentItem(:comment="comment")

IFRAME в HTML выглядит так:

<iframe src="https://youtube.com/embed/PRqKCgT0sQA?rel=0&amp;enablejsapi=1&amp;origin=http://localhost:8080" frameborder="0" allowfullscreen="allowfullscreen"></iframe>

При первой загрузке страницы видео и комментарии устанавливаются как положено.

Но при попытке добавить комментарий, появляется ошибка:

[Vue warn]: Error in nextTick: SecurityError: Blocked a frame with origin http://localhost:8080 from accessing a cross-origin frame.
DOMException: Blocked a frame with origin "http://localhost:8080" from accessing a cross-origin frame.

Если удаляю все комментарии из переменной comments - комментарии удаляются без ошибок, никакого влияния не IFRAME не оказывается; если добавляю хоть один комментарий - всё фатально ломается. По трейсу вижу, что в момент возникновения ошибки срабатывает реактивность VUE, и на ней же всё и останавливается:

трейс ошибки

Т.е. реактивность VUE оказывает влияние на статичный IFRAME компонент, на который, оказывать влияние не должна. Почему так? Как отобразить IFRAME с YOUTUBE и при этом сохранить реактивность для добавления комментариев на странице?


Ответы (0 шт):