我是VueJS的新手,我正在做一些奇怪的实验。我使用python/flask构建了一个后端服务,这个后端向我提供了一个包含许多标签的html代码字符串,我想在我的Vue应用程序中呈现它,我有一个调用后端的方法,如下所示:
async execute (method, resource, data) {
return client({
method,
url: resource,
data: data
}).then(async req => {
return req.data.html
})
},
callBack (id) {
console.log(id)
return this.execute('post', '/content/', {body: { 'id': id }})
}
在.vue文件中,我有:
export default {
data () {
return {
loading: false,
launch: [],
html: 'none',
page: this.$route.params.article
}
},
beforeMount () {
console.log('beforeee')
this.html = api.callBack(this.page)
},
methods: {
async launch () {
this.launch = ''
this.html = await api.callBack(this.page)
}
}
}
所以当我调用启动函数时,它会填充测试,这个html变量存在于一个v-html.似乎一切正常,我得到了这个html,并将它呈现在de容器中,但是链接断开了,链接应该指向相同的应用程序,比如#/ this.html /linkvalue,但是因为它们是标签,所以在vue中你必须使用它们,它们是不起作用的。
有一种方法可以实现这种“动态重新路由”,还是我做了一些太奇怪的事情?链接很多,因为它们是从web上抓取的,所以手动解析是不可行的。
提前感谢您的帮助
发布于 2018-06-07 04:34:17
另外,你不应该返回原始的html。只需返回路由的路径,然后循环路径并以此方式创建链接。
您可以使用html指令输出原始v-html
。
https://jsfiddle.net/eywraw8t/66262/
new Vue({
el: "#app",
data: {
rawhtml: "<h1 style='color: red;'>Hi, I am raw html.</h1>"
},
methods: {
}
})
<div id="app">
<div v-html="rawhtml"></div>
</div>
https://stackoverflow.com/questions/50712483
复制相似问题