title: Vue.js show white space (line breaks)
body: <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>