How to handle when VueJS computed properties return HTML code?

Question

I use VueJS 2 to render and calculate form items. Now I need to show a number if a propertie is under 10, and I need show a text message if the propertie is over or equal 10.

I use this code:

Vue.component('mycomponent', {
    template: '#mytemp',
    data: function() {
        // ...
    },
    computed: {
         mycomputedprop: function() {
             if (this.model_a < 10) {
                 return '<span class="numbervalue">' + this.model_a + '€</span>';
             } else {
                 return '<span class="textvalue">I\'ll contact you as soon as possible!</span>';
             }
         }
    }
});

I use this code to show the value:

<div id="app">
    {{ mycomputedprop }}
</div>

The problem is: if I show this value it shows the HTML code as text, not as HTML. How can I show the returned value as a HTML code?

Possible duplicate of VueJS Print HTML to Page

webnoob
– webnoob

2017-06-28 14:01:11 +00:00
Commented Jun 28, 2017 at 14:01 — webnoob
– webnoob, Commented Jun 28, 2017 at 14:01

tony19 · Accepted Answer · 2022-07-15 19:44:09Z

63

You could use v-html

Document : Raw-HTML

<div id="app">
 <div v-html="mycomputedprop"></div>
</div>

The contents of this div will be replaced with the value of the rawHtml property, interpreted as plain HTML - data bindings are ignored. Note that you cannot use v-html to compose template partials, because Vue is not a string-based templating engine. Instead, components are preferred as the fundamental unit for UI reuse and composition.

Vue 3 Example:

const RenderHtmlApp = {
  data() {
    return {
      rawHtml: '<span style="color: red">This should be red.</span>'
    }
  }
}

Vue.createApp(RenderHtmlApp).mount('#example1')

<script src="https://unpkg.com/vue@next"></script>
<div id="example1">
    <p>Using mustaches: {{ rawHtml }}</p>
    <p>Using v-html directive: <span v-html="rawHtml"></span></p>
</div>

edited Jul 15, 2022 at 19:44

tony19

140k24 gold badges281 silver badges354 bronze badges

answered Jun 28, 2017 at 13:38

Mohammad Fanni

4,2033 gold badges31 silver badges55 bronze badges

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

1 Comment

Byscripts Over a year ago

It's the best answer regarding the asked question. So I upvoted it. But a good practice would be to NOT return HTML. Regarding this, @JeBokE answer is "better".

Djurdjen · Accepted Answer · 2017-06-28 13:57:54Z

7

Assuming that modal_a is defined in the data of your component, why not handle this within the component template?

  <div id="app">
    <span v-if="model_a < 10" class="numbervalue">{{model_a}} €</span>
    <span v-else class="textvalue">I\'ll contact you as soon as possible!</span>
  </div>

answered Jun 28, 2017 at 13:57

Djurdjen

2812 silver badges10 bronze badges

1 Comment

Marco Over a year ago

It's one way to do it, but it's far from optimal. Vue discourages template handled directly into thi HTML.

Collectives™ on Stack Overflow

How to handle when VueJS computed properties return HTML code?

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related