Why vhtml not rendering nested << properly?

Question

I have an app that uses dynamic binding where <> is a dynamic way of getting value from API. But when I am trying to render it in vhtml, its not even showing the parent element. I want it like Name: <<Name>>. How this can be achieved? . I have attached the example code.

const app = new Vue({
  el: '#app',
  data () {
    return {
      htmlText: '<p> Name : <<Name>> </p>'
    }
   }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<span v-html="htmlText"></span>
</div>

MrSrv7 · Accepted Answer · 2022-02-02 21:13:54Z

1

On top of Link's and Xlm's answers on vue: escape and render HTML string?

Parse the incoming string with a regex that replaces < with < and > with >

Please note that this could be just a workaround. If you want a cleaner solution, you should do this in the API.

In your case,

 const app = new Vue({
   el: "#app",
   data() {
      return {
        htmlText: "<p> Name : <<Name>> </p>",
      };
   },
   methods: {
      htmlToText(html) {
          return html.replace(/<</g, "&lt;&lt;").replace(/>>/g, "&gt;&gt;");
      },
   },
});

<div id="app">
  <span v-html="htmlToText(htmlText)"></span>
</div>

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

answered Feb 2, 2022 at 21:13

MrSrv7

8201 gold badge11 silver badges26 bronze badges

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

Collectives™ on Stack Overflow

Why vhtml not rendering nested << properly?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related