VueJS 中的 v-html 不起作用（空页面）
Posted
技术标签:
【中文标题】VueJS 中的 v-html 不起作用（空页面）【英文标题】：v-html in VueJS is not working (empty page) 【发布时间】：2020-05-02 04:30:55 【问题描述】：我是 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 没有显示任何内容。我应该如何调整才能完成这项工作？
感谢您的帮助。
【问题讨论】：
您可以在您的 v-html div 中添加:key="refresh" 并在设置输入后执行 refresh+=1 看看是否有效
做了一个快速测试，对我来说它有效。当您能够在控制台中记录 HTML 时，您的情况应该没有什么不同。你使用 vue-cli 吗？
是的，我使用了 vue-cli，现在我让它与“Hello World”-示例一起使用，但是当我尝试加载真正的 html 时，我什么都看不到...... html是从 Bokeh 生成的，包含
【参考方案1】：
你为什么不这样做：
<div v-html="input"></div>
【讨论】：
是的，这里不需要计算属性。但这两种情况都行！ 是的，它有效，但我编辑了问题，现在这是一个不同的问题。感谢您的帮助 将问题编辑为新问题并不是一个好习惯，因为它会破坏 *** 的要点。最好的办法是在这种情况下创建一个新问题【参考方案2】：您不需要为此使用计算属性，只需使用v-html="input"。
例如，我对您的代码进行了一些更改：
<div v-html="input"></div>
<script>
import axios from 'axios'
export default
data()
return
input: null
,
created()
this.loadFile()
,
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>
您的 res.data 应该是一个合适的 html 才能正常工作。
【讨论】：
【参考方案3】：试试这个：
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.1/axios.js"></script>
</head>
<body>
<div id="app">
<div v-html="input"></div>
</div>
<script>
new Vue(
el:"#app",
data:
input: null
,
created()
this.loadFile()
,
methods:
loadFile()
axios(
method: "get",
url: "https://www.w3.org/TR/PNG/iso_8859-1.txt"
)
.then(result =>
this.input = result.data;
)
.catch(error =>
console.error("error getting file: " + error);
);
);
</script>
</body>
</html>【讨论】：
以上是关于VueJS 中的 v-html 不起作用（空页面）的主要内容，如果未能解决你的问题，请参考以下文章
VueJS根据for循环中的变量加载SVG文件，使用v-html给出[object Module]
Laravel-vuejs（Vue 路由器）Javascript 在 onchange url 中不起作用