vuex getter with html

Question

I have a vuex implementation which has getter getScore() and I would like return html code to template, but template escapes me the result html to raw text.

vuex code looks like:

  getters: {
    getScore(state) {
        return state.score > 10 ? "<b class=\"green\">" + state.score + "</b>" : "<b class=\"red\">" + state.score + "</b>";
    }
  },

result is not html but raw text e.g. <b class=“red”>5</b>

How to return html which will be inserted as html to the template? Thanks for any help.

Answer 1

You should use the v-html directive to get it to render as HTML.