How can I display dynamic HTML having Vue variables inside?

Question

I am trying to make the page content dynamic. I am using ck-editor in which i added html content and used the same vue variables inside it which i declared in the vue file where i want to show ck-editor data. I found a similar post vuejs - “editing” html inside variable which works fine if i write the html inside a variable. But in my case, i am saving data in database. It is saving properly with html tags, without converting the tags. When i get data using axios it returns it in form of string. And i used vue variable to display that html.

Here is my code for better understanding:

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

Here is the example of data saved in db:

<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>

I used variables in all possible ways. But on the page they are printing in it the same way i saved it. Here is the output:

screenshot

Can anyone help me make it working.

Thanks in Advance.

glinda93 · Accepted Answer · 2020-02-27 07:28:20Z

2

IMHO since the salesContent is fetched from db, it's a plain String. Thus nor vuejs or vanilla javascript will replace the inline variables with their values. (It may be possible by using eval, but it's totally out of question...) You should manually do that with String replace function. Like the following:

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

answered Feb 27, 2020 at 7:28

glinda93

8,5297 gold badges51 silver badges88 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

DevD Over a year ago

Thank you for your quick response. Is there a way if i can change the format of saving data as per vue readable format?

glinda93 Over a year ago

@DevD I think that's impossible. Refer to Michael's answer below.

tony19 · Accepted Answer · 2022-07-15 04:23:06Z

2

According to the docs this does not seem possible:
https://v2.vuejs.org/v2/guide/syntax.html#Raw-HTML

Particularly:

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

You could as suggested in that answer just use a computed based on what you get from the server.

edited Jul 15, 2022 at 4:23

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Feb 27, 2020 at 7:27

Michael

5,1488 gold badges37 silver badges60 bronze badges

1 Comment

DevD Over a year ago

Thank you. I will use the way suggested by bravemaster.

Collectives™ on Stack Overflow

How can I display dynamic HTML having Vue variables inside?

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related