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

【问题标题】：Vue.js - Embed Swagger UI inside a Vue component?Vue.js - 在 Vue 组件中嵌入 Swagger UI？
【发布时间】：2020-07-20 13:27:01
【问题描述】：

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

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

是如何在静态页面中执行此操作的示例。但我需要在 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."

【问题讨论】：

你需要 Swagger UI 而不是 Swagger JS。这是否回答了您的问题 - How to embed Swagger UI to a webpage?
@Helen 不，实际上不是。首先，我有一个 Vue 组件，所以我不能只将函数表达式粘贴在窗口对象中。其次，我没有URL，因为我要渲染的文件是用户在上面的表单中上传的，所以我需要将一个文件或blob传递到swagger ui中。也许我应该更新我的问题，因为到目前为止它留下了太多的假设空间

标签： vue.js swagger swagger-ui

【解决方案1】：

这似乎是一个简单但非常不明显的错字：在 windows.onload 函数中：

dom_id: '#swagger-ui',

必须改为

dom_id: 'swagger-ui',

没有井号，就是这样！

【讨论】：

【解决方案2】：

我在尝试使用静态招摇规范时遇到了类似的错误 (Target container is not a DOM element)。我发现 Vue 有 mounted() 函数，而不是使用 window.onload，所以这个 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>

【讨论】：