Vue. js - Вставить Swagger UI в компонент Vue? - PullRequest
Новая
       11

Vue. js - Вставить Swagger UI в компонент Vue?

0 голосов
/ 08 апреля 2020

В моем компоненте Vue есть форма, которая загружает файл API. Теперь я хочу отобразить содержимое файла следующим образом: swagger-ui example

Я импортировал клиентскую библиотеку Swagger: https://github.com/swagger-api/swagger-ui. Теперь здесь

- пример того, как вы делаете это на странице c. Но мне нужно сделать это внутри 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."
...