Vue template - convert HTML special characters (nu

Question

How can I convert special characters (numberic) to symbols in my Vue template?

For instance I have this JSON data:

[{"id":"post91","slug":null,"title":"Breakfast & Tea"}]

How can I convert Breakfast & Tea to Breakfast & Tea?

My Vue template:

<h3 class="heading">{{ item.title }}</h3>

Any ideas?

Answer 1

The best option is using v-html actually:

<h3 class="heading" v-html="item.title"></h3>

No need of any other libs.

Answer 2

It's easier to use a library like he for this:

new Vue({
  el: '#app',
  created(){
    this.message = this.decode('Breakfast & Tea');
  },
  methods:{
    decode(str){
        return he.decode(str);
    }
  },
  data:{
    message: ''
  }
})

Here's the JSFiddle: https://jsfiddle.net/86k1ge4b/