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>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, "<<").replace(/>>/g, ">>");
},
},
});<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>