How to parse \n after joining array to string in VueJS?

Question

In my Vue.JS code I have array in object which I parsed in string like this:

destination: item[1].destination.join('\n')

In console.log(obj) I can see it looks like this:

destination: "test1\ntest3\ntest3"

But on page it looks like common string, without \n.

How can I parse it to make HTML see those \n?

In order to display newlines in HTML you will need to use <br> — nucleaR
– nucleaR, Commented Dec 6, 2021 at 10:48
Do you want three separate list items or a single list item with three neested items or a single list item with a single element separated by new lines? — briosheje
– briosheje, Commented Dec 6, 2021 at 10:49
It looks like this - I have array with x elements and I need to do something to show it on page, but every record should be on a new line — dokichan
– dokichan, Commented Dec 6, 2021 at 10:53

Julien Baldy · Accepted Answer · 2021-12-06 10:49:03Z

1

You need to use style="white-space: pre-line" on your composant html

answered Dec 6, 2021 at 10:49

Julien Baldy

4462 gold badges5 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Amaarockz · Accepted Answer · 2021-12-06 11:01:12Z

0

If you have an array of items then Try following the below approach

let app = new Vue({
 el: '#app',
 data() {
  return {
    textData: ['Text1\nText2\nText3', 'Text4\nText5\nText6']
  };
 },
 });

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div class="sampleDiv" v-for="(text, index) in textData" :key="index">{{text}}</div>
</div>

answered Dec 6, 2021 at 11:01

Amaarockz

4,6942 gold badges12 silver badges31 bronze badges

1 Comment

Amaarockz Over a year ago

The above solution applies for an array of items which you want to be listed on separate lines

Collectives™ on Stack Overflow

How to parse \n after joining array to string in VueJS?

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related