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

Question

我正在尝试使页面内容动态化。我正在使用 ck-editor，我在其中添加了 html 内容，并在其中使用了我在 vue 文件中声明的相同 vue 变量，我想在其中显示 ck-editor 数据。我在postvuejs - “editing”html里面找到了一个类似的变量如果我将 html 写在变量中，它就可以正常工作。但就我而言，我将数据保存在数据库中。它使用 html 标签正确保存，无需转换标签。当我使用 axios 获取数据时，它 returns 它以字符串的形式出现。我使用 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>

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

screenshot

谁能帮我让它工作。

提前致谢。

Answer 1

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

特别是：

The contents of the span will be replaced with the value of the rawHtml property, interpreted as plain HTML - data bindings are ignored.

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

Answer 2

恕我直言，因为 salesContent 是从数据库中获取的，所以它是一个普通字符串。因此，vuejs 或 vanilla javascript 都不会用它们的值替换内联变量。（使用 eval 可能是可行的，但这完全是不可能的...）您应该使用 String replace 函数手动执行此操作。像下面这样：

<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
        });
      }
    }

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

How can I display dynamic HTML having Vue variables inside?

html

dynamic-html

axios

vuejs2