view raw
Jamie Jamie - 7 months ago 50
Javascript Question

Vue.js show white space (line breaks)

How would I show line space in vue.js. Right now everything is after each other....

Already tried this:

But nothing seems work. Trying this for 3 days now -_-.

I'm using

1.0 and

Thanks a lot!


<bar :title="title"></bar>
<div class="Row Center">
<div class="Message Center" v-if="!loading">
<div class="Message__body" v-if="messages">
<div class="Message__item__body" v-for="message in messages" v-link="{ name: 'Message', params: { message: message.slug }}">
<div class="Message__item__body_content">
<p class="Message__title">{{ message.subject }}</p>

<div class="Message__item__body_content">
<p>Reacties: {{ message.totalReactions }}</p>

<div class="Message__item__body_content">
<p>Door: {{ }} {{ message.user.last_name }}</p>

<pagination :last-page="lastPage" :page="page" :name="Message"></pagination>
<p v-if="noMessages" class="Collection__none">Er zijn momenteel geen berichten voor het topic {{ }}.</p>

<div class="Loader" v-if="loading">
<grid-loader :loading="loading" :color="color" :size="size"></grid-loader>

<div class="Row center" v-if="!loading && page == 1 && topic">
<button type="submit" class="Btn Btn-main" v-link="{ name: 'NewMessage', params: { topic: topic.slug }}">Nieuw bericht</button>

import Bar from '../Shared/Bar.vue';
import Pagination from '../Shared/Pagination.vue';
import Topic from '../../Services/Topic/TopicService';
import { GridLoader } from 'vue-spinner/dist/vue-spinner.min.js';

export default {

components: { Bar, Pagination, GridLoader },

data () {
return {
title: 'Berichten',
messages: [],
topic: null,
noMessages: false,
loading: false,
color: "#002e5b",
page: 1,
lastPage: 1,

route: {
data ({ to }) {
this.loading = true; = || 1;$route.params.topic,
.then((data) => {
this.topic =;
if(! == 0) {
this.messages =;
this.lastPage =;
else {
this.noMessages = true;

this.loading = false;

When I do it like this:

<div class="Message__body__message">
<p>{{ message.message.split("\n"); }}</p>

It only adds comma's.


When you split the message, you get multiple data items, which you should handle with a v-for.

new Vue({
  el: '#app',
  data: {
    message: `this is a message
it is broken across
several lines
it looks like a poem`
<script src="//"></script>
<div id="app">
  <p v-for="line in message.split('\n')">{{line}}</p>