为什么 vhtml 不能正确渲染嵌套 <<？

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>

Answer 1

The error of yours was the << >> characters inside your string.

 const app = new Vue({ el: '#app', data () { return { name: 'Max' } }, computed: { templateName() { // use a computed property or a method with template strings return `<p>Name: ${this.name} </p>` } } })

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

Answer 2

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>