如何在Nuxt 3中实现iframe的动态src属性

你的iframe没有src属性，本质是currentDoc.src未被正确赋值，结合代码来看，以下是具体排查点和修复方案：

1. 初始化空对象导致提前渲染 #

currentDoc初始化为空对象，组件挂载前模板就会渲染，此时currentDoc.src是undefined，浏览器不会生成src属性。

修复：添加条件渲染，确保有src值时再渲染iframe：

<template>
  <div>
    <iframe
      v-if="currentDoc.src"
      :src="currentDoc.src"
      allowfullscreen="true"
      frameborder="0"
      scrolling="no"
      width="560"
      height="400"
      :title="currentDoc.title">
    </iframe>
    <div v-else>文档加载中...</div>
  </div>
</template>

2. 路由参数与文档ID类型不匹配 #

$route.params.id默认是字符串类型，如果你的Docs数组中id是数字，==的隐式转换可能失效，导致find找不到匹配项，currentDoc仍为空对象。

修复：统一类型后再匹配：

mounted() {
  const routeId = this.$route.params.id;
  // 转成字符串统一匹配，或根据Docs中id类型转成数字
  this.currentDoc = this.docs.find(doc => String(doc.id) === routeId) || {};
}

同时可以加错误处理，避免找不到文档的情况：

mounted() {
  const routeId = this.$route.params.id;
  const targetDoc = this.docs.find(doc => String(doc.id) === routeId);
  if (targetDoc) {
    this.currentDoc = targetDoc;
  } else {
    console.error('未找到对应ID的文档');
    // 可设置默认文档或提示用户
  }
}

3. Nuxt3中路由参数获取的注意点 #

如果是Nuxt3的Options API组件，用useRoute更符合框架规范：

import { useRoute } from 'vue-router';
import Docs from '@/.../docs';

export default {
  data() {
    return {
      docs: Docs,
      currentDoc: {},
    }
  },
  setup() {
    const route = useRoute();
    return { route };
  },
  mounted() {
    const routeId = this.route.params.id;
    this.currentDoc = this.docs.find(doc => String(doc.id) === routeId) || {};
  }
}

4. 检查Docs数据源格式 #

确认Docs数组中的每个元素都包含有效id和src属性，比如：

// 正确的Docs示例
export default [
  { id: 1, src: 'https://your-doc-url.com/1', title: '文档1' },
  { id: 2, src: 'https://your-doc-url.com/2', title: '文档2' }
];

若某条数据的src为空或未定义，也会导致iframe无src属性。

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