Vue.js show white space (line breaks)

Question

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

Already tried this:

https://laracasts.com/discuss/channels/vue/vuejs-how-to-return-a-string-with-line-break-from-database

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

I'm using Vue.js 1.0 and browserify.

Thanks a lot!

--EDIT--

<template>
<div>
  <bar :title="title" />
  <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>

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

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

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

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

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

<script>
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;
      this.page = to.query.page || 1;
      Topic.show(this.$route.params.topic, this.page)
           .then((data) => {
             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;
           });
    }
  }
}
</script>

When I do it like this:

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

It only adds comma's.

--EDIT--

If you use double mustaches to show the text in Vue try `v-html` directive. https://vuejs.org/guide/syntax.html#Raw-HTML — Can Vural, Oct 21 '16 at 13:55

score 56 · Answer 1 · answered Aug 22 '18 at 23:34

56

Set container white-space style to pre-line, as in:

<div style="white-space: pre-line;">{{textWithLineBreaks}}</div>

answered Aug 22 '18 at 23:34

LMK

1,496
1
13
15

11

Best answer right here. Also consider using `white-space: pre-wrap`, as it doesn't collapse sequential whitespace like `pre-line`. – Shawn Erquhart Oct 18 '18 at 20:18

Roy J · Accepted Answer · 2019-08-27T20:52:00.507

22

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

But also see LMK's answer wherein you don't have to split the message.

new Vue({
  el: '#app',
  data: {
    message: `this is a message
it is broken across
several lines
it looks like a poem`
  }
});

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.min.js"></script>
<div id="app">
  <template v-for="line in message.split('\n')">{{line}}<br></template>
</div>

edited Aug 27 '19 at 20:52

answered Oct 21 '16 at 14:58

Roy J

42,522
10
78
102

Awesome! Works great. – Jamie Oct 21 '16 at 15:07
One thing :) I receive a console error: `Error when evaluating expression "message.message.split('\n')": TypeError: Cannot read property 'split' of undefined` – Jamie Oct 21 '16 at 15:09
Is your `message.message` always a string? The error suggests it's undefined in at least some case. – Roy J Oct 21 '16 at 15:21
It looks like line breaks are causing this issue (because they are empty). And it's only working with one line break if I add multiple line breaks it only shows one! Please see my edit for the example string in my database that's causing the issue. – Jamie Oct 21 '16 at 15:31
I've edited my example to include some blank lines. That's not the problem. The error indicates that it is trying to call `split` as a method of an undefined value. At some point, for some reason, `message.message` is not a string. – Roy J Oct 21 '16 at 15:50
Okay, strange because if I `console.log(message.message)` result is: `optio\ns` – Jamie Oct 21 '16 at 18:12
Wonderful! Thank you for sharing! – Marco Apr 29 '19 at 20:52

score 0 · Answer 3 · answered Oct 21 '16 at 13:55

0

You have to transform your data before rendering it with Vue.

const lines = stringWithLineBreaks.split('\n')
// then render the lines

I can give a more specific answer if you share the code you're working with.

answered Oct 21 '16 at 13:55

Max Heiber

14,346
12
59
97

Thanks for your reply. I've added a component above that display's messages (see edit)! – Jamie Oct 21 '16 at 13:57
@Jamie my answer was going to be like Roy J's - looks good to me – Max Heiber Oct 21 '16 at 15:41
You could also use a computed property for it like: lines() { return this.stringWithLineBreaks.split('\n'); } – Winner Crespo Jun 16 '17 at 14:51

Vue.js show white space (line breaks)

3 Answers3

Linked