VueJS render property inside html string using v-html

Question

I have a string of html where I get from Editor and stored in the database.

&

Answer 1

Make content a computed property. And then use it like this:

  computed: {
    content() {
       return '
Profile Of User:
' + this.user + '
';
    }
  }

You can use all variables defined in data in this way.

Update: Since OP is getting the HTML string from backend, they need to replace the variables in this case. We have kept a map of all variables that might come and then we are creating a Regex dynamically to replace the said key from code.

  computed: {
    content() {
      // keep a map of all your variables
      let valueMap = {
        user: this.user,
        otherKey: 250
      };
      let value = '
Profile Of User:
{{user}}
';
      let allKeys = Object.keys(valueMap);
      allKeys.forEach((key) => {
        var myRegExp = new RegExp('{{' + key + '}}','i');
        value = value.replace(myRegExp, valueMap[key]);
      });
      return value;
    }
  }