How to render line-break ↵ in VueJS?

Question

I want to render a line break whenever there's a ↵ in Vue.

I followed How can I use v-html on the vue? but I am unable to follow.

What I have tried:

 var app = new Vue({ el: '#app', data() { return { a: { country: "England:↵ - Liverpool↵ - Chelsea↵ - Arsenal↵ - MU↵ - City", }, testObj: "", }; }, computed: { jsonFunc() { return (this.testObj = this.a.country.replace(/↵/g, "<br/>")); }, }, })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <div> Vue {{ jsonFunc }} </div> </div>

Answer 1

Use v-html directive

 <template> <div > Vue <span v-html='jsonFunc'></span> </div> </template> <script> export default { data() { return { a: { country: "England:↵ - Liverpool↵ - Chelsea↵ - Arsenal↵ - MU↵ - City", }, testObj: "", }; }, computed: { jsonFunc() { return (this.testObj = this.a.country.replace(/↵/g, "<br/>")); }, }, }; </script>