Vue - How to render HTML in vue components

Question

This is what I'm trying to accomplish:

{{ span('Hello') }}

And what desired output should be is:

<span>
   Hello
</span>

Is this possible?

Thanks

Obviously possible, but can you share what you have tried yet? — Satyam Pathak
– Satyam Pathak, Commented Jul 4, 2019 at 6:43
You should use JSX to display for this purpose! Follow here scotch.io/tutorials/using-jsx-with-vue-and-why-you-should-care — Le Khiem
– Le Khiem, Commented Jul 4, 2019 at 6:55
@SatyamPathak well, what I really want to accomplish is that, when a certain configuration is turned on, the method needs to add a 'span' or a 'button' around it so I can click on it. — Kevin Gorjan
– Kevin Gorjan, Commented Jul 4, 2019 at 6:58
That looks like something you fundamentally avoid doing! People need to understand your method, and the overall result obscures what's going on. — bbsimonbb
– bbsimonbb, Commented Jul 4, 2019 at 7:29

Supun Praneeth · Accepted Answer · 2023-02-15 06:47:19Z

65

Look at the below snippet -

Note - You can't render html inside {{ }} because it get added to text node of the element. To render it as an html you need to use v-html and have your function which return element wrapping your text

new Vue({
  el: "#app",
  data: {
    foo: 'asdasd'
  },
  methods: {
   span(text) {
    return `<span> ${text} </span>`
   }
  }
})

span {
 color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>


<div id="app">
  <h1> 
    Render whatever you want
  </h1>
  <div v-html="span('Hello world')" /> 
</div>

edited Feb 15, 2023 at 6:47

Supun Praneeth

3,1802 gold badges33 silver badges36 bronze badges

answered Jul 4, 2019 at 7:29

Satyam Pathak

6,9603 gold badges28 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Kevin Gorjan Over a year ago

Thanks. I didn't know you could not render HTML in the brackets. Used your solution to continue

Rahimuddin · Accepted Answer · 2022-11-27 16:35:19Z

9

For Vue3 it is v-html="htmlContent"

answered Nov 27, 2022 at 16:35

Rahimuddin

6349 silver badges16 bronze badges

2 Comments

the Tin Man Over a year ago

See "How to Answer" and Explaining entirely code-based answers". While this might be technically correct, it doesn't explain why it solves the problem or should be the selected answer. We should educate along with helping solve the problem.

Rahimuddin Over a year ago

Thanks for the suggestion @theTinMan. I will keep this in mind next time and I will also edit the above answer :)

Puwka · Accepted Answer · 2019-07-04 06:44:57Z

3

<span>{{Hello}}</span>

If you need dynamic HTML tag <tag :is="tag">{{Hello}}</tag>

Vue.component('tag', {
  props:{
     is:{type:String, required:true}
  },
  render(h){
    return h(this.tag, this.$slots.default)
  }
})
new Vue({
    el:'#vue',
    data(){
    return {
        tag:'h1'
    }
  }
})

answered Jul 4, 2019 at 6:44

Puwka

6505 silver badges13 bronze badges

Collectives™ on Stack Overflow

Vue - How to render HTML in vue components

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related