0
127
ViewsHow to parse \n after joining array to string in VueJS?
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?
·
Juan Pablo Isaza
2 answers
Answer question0
You need to use style="white-space: pre-line" on your composant html
·
Juan Pablo Isaza
Report
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>
·
Juan Pablo Isaza
Report
Answer question