javascript - 使用 Axios 将整个 HTML 项目加载到 VueJS 组件中
问题描述
我正在处理需要在 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 是否适合这种情况?
谢谢
解决方案
您将无法执行此操作,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>
推荐阅读
- javascript - 如何对对象数组中的相似属性求和
- python - 如何安全地访问和存储活动 python 文件中使用的主安全密钥?
- kubernetes - 同一集群中 Kubernetes pod 之间的连接被拒绝
- r - 如何将此列表列表转换为R中的数据框?
- mysql - Microsoft.EntityFrameworkCore 5.0.2 与 uap10.0.17134 不兼容(UAP,Version=v10.0.17134)
- javascript - 表单提交上的 addEventListener 不会调用我的函数
- postgresql - postgresql 生成两个日期字段之间的日期列表
- python - Bash:如何将元素添加到存储在变量中的数组中?
- javascript - 如何进行倒计时重置
- xslt-grouping - 使用多个子项对 XML 进行分组