V html - Vue JS v-html Directive Examples

Some Background on VueJS

Vue JS is a front end framework getting all the traction it deserves. It is created by cherry-picking the best features of Angular and React, The Two popular Frontend Java Frameworks in the modern IT industry.

It is a wonderful and robust framework that you can count on.

I myself have used it for various purposes like Mobile App, WebSite Development, Desktop App with Electron etc. It is easy to use

It is beating its own predecessors and growing exponentially. Refer the following chart showing the growth of VueJS in terms of Github Stars rating.

There are many things to love about VueJS and you can read this article for more information

Reasons why Vue.JS is getting all the traction 

VueJS DOM and Interpolation Syntax

Vue.JS framework is known for its Single Page Application Development Strategy. Where Vue instance controls a specific portion or element/tag of the HTML.

Here is a quick program to understand how VueJS instance is being created and controls the element of an HTML.

Example1

In the preceding program, If you look at the javascript section. You could notice We are creating a new vue Instance and specifying which DOM element has to be managed by VueJS. el="#widget2 In our case it is widget2. You can consider it more like document.getElementById

As the widget2 is rendered and being managed by Vue.js. It is eligible to access all the methods and data defined under vuejs instance using interpolation syntax.

Refer to this second example where we have added some new data, ( A Variable) in the Vue instance and rendering it in our DOM or HTML element using interpolation syntax {{ }}

Example2

Comparison of Example1 and Example2

The Message we displayed on the Example1 and Example2 is same. Except for the location, it was defined.

In First Example. the Message was written inside the <h2> tag  as a normal HTML, Not inside the Vue Instance

<div id="widget2">
  <h2><b>I am Widget2</b> - Managed by VueJS</h2>
</div> 

and it yielded the result like this.

 

In Second Example, the same HTML Message was copied into the VueJS data object and assigned to a variable named message and then rendered using interpolation syntax. {{ message }}

Refer the following code snippet.

<div id="widget2">
  <h2>{{ message }}</h2>
</div>


// Creating new Vue Instance
new Vue({
  // Choosing the element to be controlled by Vue.JS by ID
  el: "#widget2",
  data: {
    message: "<b>I am Widget2</b> - Managed by VueJS"
  },
  methods: {
  	
  }
})

If you have noticed the result of our Example 2 in the preceding JSFiddle.  You could have seen the result looked like this.

 

There is something wrong with this result. If you have not already noticed, Let me tell you the Message being displayed has contained some HTML <b></b> tags.

VueJS is showing the HTML elements like a text, where it should have ideally applied the tag b and strengthened the text  I am Widget2

It did not happen why?

 

How to display Dynamic HTML in VueJS using v html directive.

In order to display the HTML, we need to understand something very simple. While interpolating and rendering, VueJS is considering the data (or) a variable as a String or Text.

VueJS would not care if there is any HTML element or not

It is more like displaying whatever was assigned to the variable blindly.

while that sounds OK in most of the cases. There comes a requirement where we have to display some Dynamic HTML which is created in the VueJS instance and rendered into the Html DOM.

let's say we simply want our HTML code to be displayed after processing rather than showing it as raw html

 

 

Real-time scenario and What are we expecting?

Let's suppose you are processing some HTML data stored in the Database as a text and read from the database and want to render it in your application.

The Best Example is BLOG or WYSIWYG editor where whatever we type would be saved into the database as HTML elements and it would be read and displayed after rendering.

WordPress is the best example of this kind of data store and retrieval.

In such cases.where you might want to add some dynamic HTML into your vuejs program and to display the HTML as a regular HTML ( not as a text) .Vue JS has given us a directive named v-html

Our Example2 is also similar and we want to render the HTML element instead of a Raw HTML.

Refer to the following diagram what we are trying to achieve.

 

 

Here is the Fix to the Example2 using V HTML

Instead of using the double moustache syntax {{ }} we are going to use the v-html directive to display and render the HTML element properly this time.

Refer to the following code snippet where we have modified The Example2 with v-html

The only change we made is replacing the interpolation {{ }} with v-html directive.

<div id="widget2">
  <h2 v-html="message"></h2>
</div>


// Creating new Vue Instance
new Vue({
  // Choosing the element to be controlled by Vue.JS by ID
  el: "#widget2",
  data: {
    message: "<b>I am Widget2</b> - Managed by VueJS"
  },
  methods: {
  	
  }
})

 

Conclusion

Hope you have learnt the Normal interpolation and v-html or V html based interpolation in this article with example.  If you like this article share this with your friends and bookmark our website.

 

Cheers
Sarav AK

---