Vue.js+TikTok API展示视频：v-html/v-for致iframe加载异常问题

你遇到的问题和v-for本身无关，核心原因是TikTok的嵌入脚本embed.js只会在首次加载时扫描页面中已存在的.tiktok-embed元素，将其替换为iframe。而v-for动态渲染的内容是在脚本执行完成后才插入DOM的，所以脚本无法自动识别这些新添加的blockquote标签。

解决步骤 #

1. 清理重复的脚本引用 #

首先，确保每个视频的embed_html里只保留<blockquote>部分，移除自带的<script>标签——重复加载脚本会导致冲突，也没必要。可以在获取API数据后做一次处理：

// 假设你从API拿到的视频数组是rawVideos
this.tiktokVideos = rawVideos.map(video => {
  // 正则移除embed.js相关的script标签
  const cleanEmbedHtml = video.embed_html.replace(/<script\s+src="https:\/\/www.tiktok.com\/embed.js".*?<\/script>/gi, '');
  return { ...video, embed_html: cleanEmbedHtml };
});

2. 动态触发TikTok嵌入初始化 #

在Vue组件的DOM渲染完成后，手动调用TikTok提供的全局方法，重新扫描并初始化所有动态添加的嵌入元素：

<template>
  <div 
    v-for="video in tiktokVideos" 
    :key="video.id" 
    class="tiktok-container"
  >
    <div v-html="video.embed_html"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tiktokVideos: []
    }
  },
  async mounted() {
    // 调用API获取视频数据
    const rawVideos = await this.getTikTokVideos();
    // 清理重复脚本
    this.tiktokVideos = rawVideos.map(video => {
      const cleanEmbedHtml = video.embed_html.replace(/<script\s+src="https:\/\/www.tiktok.com\/embed.js".*?<\/script>/gi, '');
      return { ...video, embed_html: cleanEmbedHtml };
    });

    // 等待DOM完全渲染后初始化嵌入
    this.$nextTick(() => {
      this.initTikTokEmbeds();
    });
  },
  methods: {
    async getTikTokVideos() {
      // 替换为你的API请求逻辑
      const res = await fetch('/your-tiktok-api-endpoint');
      return res.json();
    },
    initTikTokEmbeds() {
      // 检查TikTok嵌入脚本是否已加载
      if (window.TikTokEmbed) {
        // 重新渲染所有未初始化的嵌入元素
        window.TikTokEmbed.renderAll();
      } else {
        // 动态加载嵌入脚本，加载完成后再初始化
        const script = document.createElement('script');
        script.src = 'https://www.tiktok.com/embed.js';
        script.async = true;
        script.onload = () => {
          window.TikTokEmbed.renderAll();
        };
        document.body.appendChild(script);
      }
    }
  }
}
</script>

3. 额外注意点 #

• 确保:key使用唯一值（比如视频ID），避免Vue的复用逻辑导致DOM异常；
• 如果是在组件更新（比如分页加载新视频）后，也要在更新完成后调用initTikTokEmbeds()方法，确保新添加的视频能被正确初始化。

内容的提问来源于stack exchange，提问作者Try Gaming