Vue.js

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

我在尝试使用静态 swagger 规范时遇到了类似的错误 (Target container is not a DOM element)。我没有使用 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>

Answer 2

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

dom_id: '#swagger-ui',

必须改为

dom_id: 'swagger-ui',

没有井号，就是这样！

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

Vue.js - Embed Swagger UI inside a Vue component?

swagger

swagger-ui