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

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

我正在处理需要在 Rails/Vue 项目中呈现的 3D Vista Tour Web 存储库。

这是从 3D vista 导出的所有文件。呈现虚拟导览的唯一方法是将这些文件上传到服务器上。

我在这里要做的是在我的 Vue 模板中渲染该项目。 （这是一个 Rails / VueJS App 项目）

这是我的 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 是否适合这种情况？

谢谢

解决方法

您将无法使用 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>