使用 Axios 将整个 HTML 项目加载到 VueJS 组件中

Question

我正在处理一个需要在我的 Rails / Vue 项目中呈现的 3D Vista tour web 存储库。 这是从 3D vista 导出的所有文件。呈现虚拟之旅的唯一方法是将这些文件上传到服务器上。

我在这里要做的是在我的 Vue 模板中呈现该项目。 （这是一个 Rails / VueJS 应用项目）

这是我的 Vue 文件中的内容：

 <template>
    <div id="vr-frame" v-html="compiledHtml"> </div>
</template>

<script>
import axios from 'axios';

export default {
    name: 'vr',
    data() {
        return {
        fileName: "index.htm",
        input: ""
        };
    },
    computed: {
        compiledHtml() {
        return this.input;
        }
    },
    methods: {
        loadFile() {
        axios({
            method: "get",
            url: "../../assets/tours/v1/" + this.fileName
        })
            .then(result => {
            this.input = result.data;
            })
            .catch(error => {
            console.error("error getting file");
            });
        }
    },
}

</script>

我仍然不知道这实际上是否可行，到目前为止我不知道它似乎也不起作用。

将外部 Web 项目加载并呈现到 VueJS 模板中的正确方法是什么？API 是否适合这种情况？

谢谢

Answer 1

您将无法使用v-html 执行此操作，因为您正在尝试加载整个 html 页面而不仅仅是一些 html 内容。相反，请尝试使用带有 srcdoc 属性的 iframe：

<template>
  <iframe :srcdoc="compiledHtml" :src="fileName"></iframe>
</template>

<script>
import axios from 'axios';

export default {
    name: 'vr',
    data() {
      return {
        fileName: "index.htm",
        compiledHTML: ""
      };
    },
    methods: {
      loadFile() {
          axios({
            method: "get",
            url: "../../assets/tours/v1/" + this.fileName
          })
            .then(result => {
              this.compiledHTML = result.data;
            })
            .catch(error => {
              console.error("error getting file");
            });
        }
    },
}

</script>