CODEWITHSUNDEEP
htmlvue.js
Dekishigrash
Dekishigrash

Reputation: 403

Eval variable as HTML in vue

It might be basic question,however I can't find the answer and I have no idea it is possible or not.

I am not familliar with vue

What I want to do is like this

 <html>
 [[parse()]]
 </html>

new Vue({
 methods: {
  parse(){
    return "<div>test</div>"
  }
 }
});

Normally it shows the <div>test<div> as strings not html tags,

However I want to eval this return variable as html.

Is it possible?

Upvotes: 1

Views: 1126

Answers (2)

Mike D Sutton
Mike D Sutton

Reputation: 806

Assuming that you're not using unconstrained user input in your HTML generation which could leave your page vulnerable to injection attacks, you can use the v-html directive for this:

<div v-html="parse()"></div>

Upvotes: 1

tao
tao

Reputation: 90013

Use the v-html directive:

new Vue({
  el: '#app',
  methods: {
    parse() {
      return '<div>test</div>'
    }
  }
})
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<div id="app">
  <div v-html="parse()"></div>
</div>

Make sure you read the warnings.

Upvotes: 5

Related Questions