Vue.js show white space (line breaks)
<p>How would I show line space in vue.js. Right now everything is after each other....</p>
<p>Already tried this:</p>
<p><a href="https://laracasts.com/discuss/channels/vue/vuejs-how-to-return-a-string-with-line-break-from-database" rel="nofollow noreferrer">https://laracasts.com/discuss/channels/vue/vuejs-how-to-return-a-string-with-line-break-from-database</a></p>
<p>But nothing seems work. Trying this for 3 days now -_-.</p>
<p>I'm using <code>Vue.js</code> 1.0 and <code>browserify</code>.</p>
<p>Thanks a lot!</p>
<p>--EDIT--</p>
<pre><code>&lt;template&gt;
&lt;div&gt;
  &lt;bar :title=&quot;title&quot; /&gt;
  &lt;div class=&quot;Row Center&quot;&gt;
    &lt;div class=&quot;Message Center&quot; v-if=&quot;!loading&quot;&gt;
      &lt;div class=&quot;Message__body&quot; v-if=&quot;messages&quot;&gt;
        
        &lt;div class=&quot;Message__item__body&quot; v-for=&quot;message in messages&quot; v-link=&quot;{ name: 'Message', params: { message: message.slug }}&quot;&gt;
          &lt;div class=&quot;Message__item__body_content&quot;&gt;
            &lt;p class=&quot;Message__title&quot;&gt;{{ message.subject }}&lt;/p&gt;
          &lt;/div&gt;

          &lt;div class=&quot;Message__item__body_content&quot;&gt;
            &lt;p&gt;Reacties: {{ message.totalReactions }}&lt;/p&gt;
          &lt;/div&gt;

          &lt;div class=&quot;Message__item__body_content&quot;&gt;
            &lt;p&gt;Door: {{ message.user.name }} {{ message.user.last_name }}&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;

        &lt;pagination :last-page=&quot;lastPage&quot; :page=&quot;page&quot; :name=&quot;Message&quot; /&gt;
        &lt;p v-if=&quot;noMessages&quot; class=&quot;Collection__none&quot;&gt;Er zijn momenteel geen berichten voor het topic {{ topic.name }}.&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;

    &lt;div class=&quot;Loader&quot; v-if=&quot;loading&quot;&gt;
      &lt;grid-loader :loading=&quot;loading&quot; :color=&quot;color&quot; :size=&quot;size&quot; /&gt;
    &lt;/div&gt;
  &lt;/div&gt;

  &lt;div class=&quot;Row center&quot; v-if=&quot;!loading &amp;&amp; page == 1 &amp;&amp; topic&quot;&gt;
    &lt;div&gt;
      &lt;button type=&quot;submit&quot; class=&quot;Btn Btn-main&quot; v-link=&quot;{ name: 'NewMessage', params: { topic: topic.slug }}&quot;&gt;Nieuw bericht&lt;/button&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
&lt;/template&gt;

&lt;script&gt;
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: &quot;#002e5b&quot;,
      page: 1,
      lastPage: 1,
    }
  },
  route: {
    data ({ to }) {
      this.loading = true;
      this.page = to.query.page || 1;
      Topic.show(this.$route.params.topic, this.page)
           .then((data) =&gt; {
             this.topic = data.data.topic;
             if(!data.data.messages.data.length == 0) {
               this.messages = data.data.messages.data;
               this.lastPage = data.data.messages.last_page;
             } else {
               this.noMessages = true;
             }
             this.loading = false;
           });
    }
  }
}
&lt;/script&gt;
</code></pre>
<p>When I do it like this:</p>
<pre><code>&lt;div class=&quot;Message__body__message&quot;&gt;
  &lt;p&gt;{{ message.message.split(&quot;\n&quot;); }}&lt;/p&gt;
&lt;/div&gt;
</code></pre>
<p>It only adds comma's.</p>
<p>--EDIT--</p>
<p><a href="https://i.stack.imgur.com/Ho3C0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Ho3C0.png" alt="enter image description here" /></a></p>