CODEWITHSUNDEEP
vue.jsiframev-forblockquotetiktok-api
Try Gaming
Try Gaming

Reputation: 1

Displaying Recent TikTok Videos in Vue.js with Tiktok API: Issue with v-html or v-for Not Working"

I have fetched an array of recent videos and tried to display the embed_html of each video in the array. The array looks like this:

enter image description here

the full embed_html data looks something like this:

embed_html
: 
"<blockquote class=\"tiktok-embed\" cite=\"urlsample" data-video-id=\"1223122323\" style=\"max-width: 605px;min-width: 325px;\" > <section> <a target=\"_blank\" title=\"@sample.dev.14\" href=\"https://www.tiktok.com/@sample.dev.14\">@sample.dev.14</a> <p>Scenery <a title=\"scenery\" target=\"_blank\" href=\"https://www.tiktok.com/tag/scenery\">#scenery</a></p> <a target=\"_blank\" title=\"♬ original sound - sample.dev.14 - sample.dev.14\" href=\"https://www.tiktok.com/music/123322313213-original+sound+-+sample.dev.14\">♬ original sound - sample.dev.14 - sample.dev.14</a> </section> </blockquote> <script async src=\"https://www.tiktok.com/embed.js\"></script>"

In my template, I use v-for and v-html to display the videos:

<div v-for="video in tiktokVideos">
    <div v-html="video?.embed_html"></div>
</div>

Sometimes the blockquote works when it includes an iframe from TikTok, but usually, it doesn't have an iframe when I reload the page. I have tried using innerHTML, but the iframe still doesn't appear.

Working:

enter image description here

Not Working:

enter image description here

When I don't use v-for and manually insert a blockquote into the div, the iframe always loads correctly. Could the issue be related to using v-for?

Upvotes: 0

Views: 103

Answers (0)

Related Questions