Vue.js - 在 Vue 组件中嵌入 Swagger UI？

Question

我的 Vue 组件中有一个表单，用于上传 api 文件。现在我想像这样渲染文件的内容：

我导入了 swagger 客户端库： https: //github.com/swagger-api/swagger-ui。现在，这里

是如何在静态页面中执行此操作的示例。但我需要在 Vue 组件（特别是 Quasar）内执行此操作，所以我这样做：

在我的注册组件文件中注册 swagger-ui：

<link rel="stylesheet" type="text/css" href="swagger-ui.css">

现在它可以作为：

this.swaggerUI({})

我的组件中的任何地方。在我的组件中，我在模板中有一个 div 来渲染 api 文件：

<template>
    <q-form>here lies q-file element, submit button and other stuff</q-form>
    <div id="swagger-ui"></div>
</template>

在提到的问题中，他有这样的内容：

<script>
  window.onload = function() {
    const ui = SwaggerUIBundle({
      url: "https://yourserver.com/path/to/swagger.json",
      dom_id: '#swagger-ui',
      presets: [
        SwaggerUIBundle.presets.apis,
        SwaggerUIStandalonePreset
      ]
    })

    window.ui = ui
  }
</script>

区别如下：首先，没有 window.onload，我必须在提交按钮上呈现它。然后，我处理存储在我的模型中的上传文件，因此这里没有 URL。现在，我不知道如何使其与本地存储的文件一起使用，当我尝试使用远程 url 时，它给了我：

vue.esm.js?a026:628 [Vue warn]: Error in v-on handler: "Invariant Violation: _registerComponent(...): Target container is not a DOM element."

Answer 1

Target container is not a DOM element我在尝试使用静态 swagger 规范时遇到了类似的错误 ( )。我没有使用window.onload，而是发现 Vue 有该mounted()功能，所以这个 Vue 3 文件对我有用：

<template>
    <div class="swagger" id="swagger"></div>
</template>

<script>
import SwaggerUI from 'swagger-ui';
import 'swagger-ui/dist/swagger-ui.css';

export default {
    name: "Swagger",
    mounted() {
        const spec = require('../path/to/my/spec.json');
        SwaggerUI({
            spec: spec,
            dom_id: '#swagger'
        })
    }
}
</script>