Why vhtml not rendering nested << properly?-CodePudding

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>

CodePudding user response：

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>