Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Vue template - convert HTML special characters (numberic) to symbols?

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?

like image 935
Run Avatar asked Oct 22 '17 13:10

Run


2 Answers

The best option is using v-html actually:

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

No need of any other libs.

like image 180
Run Avatar answered Oct 22 '22 20:10

Run


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

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

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

like image 25
craig_h Avatar answered Oct 22 '22 21:10

craig_h