vueでiframeを使いたい

Question

現在、APIで取得したYoutubeのiframeのコードをDBに入れてそこからvue.jsで表示させようととしております。

下記のコードのようにベタ書きで記載すると問題なく表示されますが

<div>
    <iframe width="200" height="120" src="//www.youtube.com/embed/XXXX" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

下記のように記載するとそのままiframeのコードが出てしまいます。
item.embedHtmlには上記の<iframeから始まるコードが入っていることを確認しています。

 <div>
   {{ item.embedHtml}}
 </div>

こちらを正常に表示するにはどのようにしたらよろしいでしょうか

Comments

[退会済みユーザー]

こういう話ですか？
https://qiita.com/sugiii8/items/728b29d809e910cd9182

[nyonyosuke]

ありがとうございます! まさにこれでした!!

[退会済みユーザー]

お手数ですが、解決した方法を回答欄に書いてこのスレッドはクローズ願います。

Answer 1

↓ こういう話だったそうです。（質問の 2020/10/14 10:53 のコメントによる）

Vue2.xでデータをエスケープせずに表示したい
https://qiita.com/sugiii8/items/728b29d809e910cd9182

Vue 1.x からの移行 - HTML-の展開-削除
https://jp.vuejs.org/v2/guide/migration.html#HTML-%E3%81%AE%E5%B1%95%E9%96%8B-%E5%89%8A%E9%99%A4

"新たな v-html ディレクティブ を支持することによって、 HTML の展開({{{ foo }}}) は非推奨となりました。"

Comments

[退会済みユーザー]

理由も書かずにマイナス評価を付けたのは誰？

Answer 2

 <div v-html=“item.embedHtml”></div>