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

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?

CodePudding user response：

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

CodePudding user response：

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>