how to make data from backend have breakline in frontend in vue?

Question

i'm trying to achieve this. supposely i have data in backend with

example: this data - #ghost\n#mik\n#bro

supposedly it is store in an array of an object

[ {hash:"#ghost\n#mik\n#bro"} ]

i want to make the value of hash_tag to have breakline in display in frontend.

supposedly i display it in frontend and i bind it in a p element

<p v-for="data in dataFromBackend" :key="data.id">{{data.hash}}</p>

this is the script to have breakline in javascript

 function nl2br (str, is_xhtml) {
    if (typeof str === 'undefined' || str === null) {
        return '';
    }
    return (str + '').replace(/([^>\r\n]?)(\r\n|\n\r|\r|\n)/g, '$1' +  '$2');
};

the function nl2br work if do like this

 {{nl2br("mik\nmik\nbro")}}

the output is

mik
mik
bro

but when is try the data from backend its not working

{{nl2br(data.hash)}}

its output plainly

#ghost\n#mik\n#bro

score 1 · Answer 1 · answered Apr 12 '23 at 03:22

1

To leave a line break in FE that has \n in the text, you just need to add css as follows

.text-pre-line {
   white-space: pre-line;
}

In template

<p class="text-pre-line">Hello\nworld</p>

Output will be as follows

Hello
world

answered Apr 12 '23 at 03:22

DinhTX

141
4

this work when text is plainly written in a paragraph – Mikael Tenshio Apr 12 '23 at 03:46
It work when text stored in variable too, i tried: ` ` – DinhTX Apr 12 '23 at 03:55
did you try calling object inside array – Mikael Tenshio Apr 12 '23 at 05:41
I tried, it worked as normal: – DinhTX Apr 12 '23 at 09:04
oh maybe there's a problem with my code. anyways the data is from database. gonna uprove your effort. thanks mate – Mikael Tenshio Apr 13 '23 at 02:22

how to make data from backend have breakline in frontend in vue?

1 Answers1