Rendering html tags in Vue.js

Question

I have the following code:

HTML

<div id="app">
  <h1>
  Hello {{superscript('hello')}}
  </h1>
</div>

JS

new Vue({
  el: "#app",
  data: {
  },
  methods: {
    superscript(input) {
        return '<sup>' + input + '</sup>'
    }
  }
})

I want this to render:

Hello ^hello

But instead it renders the tags themselves without turning it into a superscript. JSfiddle: http://jsfiddle.net/agreyfield91/eywraw8t/188244/

Is there a way to add html tags through a Vue.js method?

you need change your span to this: <span v-html="superscript('hello')"></span> — Diego Avila
– Diego Avila, Commented Jul 19, 2018 at 19:43

X Pahadi · Accepted Answer · 2018-07-19 19:28:30Z

11

Instead of rendering the html, you need to bind it:

{{ result }}  => <span v-html="result"></span>

In your case:

<div id="app">
  <h1>
  Hello <span v-html="superscript('hello')"></span>
  </h1>
  <h1>
  What I want it to look like:   Hello <sup>hello</sup>
  </h1>
</div>

answered Jul 19, 2018 at 19:28

X Pahadi

7,4615 gold badges57 silver badges83 bronze badges

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

1 Comment

user7548189 Over a year ago

I need it to all be in the method though. Is it possible to do this without editing the html?

Collectives™ on Stack Overflow

Rendering html tags in Vue.js

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related