如何显示包含Vue变量的动态HTML

Question

我正在努力使页面内容动态。我使用的是ck编辑器，我在其中添加了html内容，并在其中使用了与我在要显示ck编辑器数据的vue文件中声明的相同的vue变量。我在变量中发现了类似的post-vuejs-"编辑"html如果我把html写在一个变量中，它会很好地工作。但在我的情况下，我将数据保存在数据库中。它使用html标记正确保存，而不转换标记。当我使用axios获取数据时，它会以字符串的形式返回数据。我使用vue变量来显示那个html。

以下是我的代码以更好地理解：

<div v-html="htmlText"></div>
new Vue({
el: '#app',
created() {
this.getSalesContent();
},
data: {
salesContent: '',
pageName: 'Sales',
salesNumber: '987-586-4511'
},
computed: {
htmlText() {
return `${this.salesContent}`;
//return this.salesContent;
}
},
methods: {
getSalesContent(){
axios.get('api/Sales').then(({ data }) => {  // getting data from DB
this.salesContent = data.sales; //data.sales have this.pageName and this.salesNumber variables
});
}
}
});

以下是保存在数据库中的数据示例：

<p style="font-weight:bold"><span style="color:red">{{pageName}}</span>,</p>
<p style="font-weight:bold"><span style="color:red">${this.pageName} ${this.pageName}</span></p>
<p style="font-weight:bold">Contact Sales at ${this.salesNumber}  {{salesNumber}}</span></p>

我以各种可能的方式使用变量。但在页面上，他们以与我保存相同的方式打印

屏幕截图

有人能帮我把它做好吗。

提前感谢。

Answer 1

IMHO由于salesContent是从数据库中提取的，因此它是一个普通的字符串。因此，vuejs或vanillajavascript都不会用它们的值来替换内联变量。(使用eval可能是可能的，但这是完全不可能的…(您应该使用Stringreplace函数手动执行此操作。如下所示：

<p style="font-weight:bold"><span style="color:red">{{pageName}}</span>,</p>
<p style="font-weight:bold">Contact Sales at {{salesNumber}}</span></p>

methods: {
getSalesContent(){
axios.get('api/Sales').then(({ data }) => {  // getting data from DB
let salesContent = data.sales; //data.sales have this.pageName and this.salesNumber variables
salesContent = salesContent.replace(/{{pageName}}/g, this.pageName)
salesContent = salesContent.replace(/{{salesNumber}}/g, this.salesNumber)
this.salesContent = salesContent
});
}
}

Answer 2

根据文档，这似乎是不可能的：
https://v2.vuejs.org/v2/guide/syntax.html#Raw-HTML

特别是：

跨度的内容将替换为rawHtml属性，解释为纯HTML-数据绑定已忽略。

您可以按照答案中的建议，使用基于从服务器获得的内容计算的。