我是 VueJS 新手，我正在尝试在 Vue 应用程序中显示本地 html 文件。
示例 html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test title</title>
</head>
<body>
<p>Hello World</p>
</body>
</html>
我做了一些研究，听说一个简单的方法是通过 axios 加载文件并显示结果。所以我这样做了如下:
<div v-html="contentdisplay"></div>
<script>
import axios from 'axios'
export default {
data() {
return {
input: null
}
},
created() {
this.loadFile()
},
computed: {
contentdisplay: function() {
return this.input;
}
},
methods: {
loadFile() {
axios({
method: "get",
url: "../../test.html"
})
.then(result => {
this.input = result.data;
console.log("Data: " + result.data)
})
.catch(error => {
console.error("error getting file: " + error);
});
},
}
}
</script>
Example.html 工作正常，但是当我尝试加载真实文件时，我看不到任何内容。该文件包含
<script type="text/javascript" ... </script>
和
<script type="application/json"> ... </script>
我没有收到任何错误消息，并且带有 result.data 的控制台日志显示了正确的 html，但 Vue 没有向我显示任何内容。我应该调整什么才能使这项工作正常进行？
感谢您的帮助。
最佳答案
你为什么不这样做:
<div v-html="input"></div>
关于javascript - VueJS 中的 v-html 不起作用(空页面)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59750872/