1 Answer

0 votes
by

The typical way to output content in a template is using the mustache syntax tags to output data from a method, prop or data variable. The mustache tags however render text. If you try to render HTML using mustache tags, it will render as a text string and won’t be parsed. To render & parse content as html, we can use the v-html directive as demonstrated below. 

Template

<div id="app" v-html=”title”></div>

App

new Vue({
    el: '#app',
    data: {
      title: '<h1 style="color: green;">Vue.js</h1>'
    }
});

Output

Vue.js

As shown in the example above, the v-html directive parses any HTML and as a result, the statement above is rendered as desired. v-html should not be used unless the developer understands risks associated with it. When incorrectly or carelessly used, v-html can expose the site/app to injection attacks where malicious code may be injected and executed from external sources. When interviewing the candidate, please ensure the candidate is aware of this issue with v-html.

Click here to read more about Vue JS
Click here to read more about Insurance

Related questions

0 votes
asked Jan 9, 2020 in Vue.JS by GeorgeBell
0 votes
asked Jul 2, 2019 in React JS by Venkatshastri
0 votes
asked Oct 21, 2019 in Vue.JS by Tate
0 votes
asked Nov 11, 2020 in Linux by sharadyadav1986
0 votes
asked Oct 16, 2019 in Git by rajeshsharma
...