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:

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"></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>

                    <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"></pagination>
                <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"></grid-loader>
        </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--

回答1:

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>

回答2:

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

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

回答3:

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.

来源：https://stackoverflow.com/questions/40178401/vue-js-show-white-space-line-breaks