Vue.js afficher l'espace blanc (sauts de ligne)

Comment puis-je afficher la ligne de l'espace dans vue.js. Maintenant tout est les uns après les autres....

Déjà essayé ceci:

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

Mais rien ne semble fonctionner. Essayez ceci pour 3 jours maintenant -_-.

Je suis en utilisant Vue.js 1.0 et browserify.

Merci beaucoup!

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

Quand je fais comme ça:

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

Il ajoute que la virgule est.

--EDIT--

Vue.js afficher l'espace blanc (sauts de ligne)

InformationsquelleAutor Jamie | 2016-10-21
  1. 20

    Lorsque vous divisez le message, vous bénéficiez de plusieurs éléments de données, que vous devez manipuler avec un v-for.

    JS:

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

    HTML:

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

    • Génial! Fonctionne très bien.
    • Une chose 🙂 je reçois une erreur de la console: Error when evaluating expression "message.message.split('\n')": TypeError: Cannot read property 'split' of undefined
    • Est votre message.message toujours une chaîne de caractères? L'erreur suggère que c'est pas définie dans au moins certains cas.
    • Il ressemble à des sauts de ligne sont à l'origine de ce problème (parce qu'ils sont vides). Et c'est seulement en travaillant avec un saut de ligne si j'ai ajouter plusieurs sauts de ligne, il ne montre qu'un seul! Veuillez voir mon edit pour l'exemple de la chaîne dans ma base de données qui est à l'origine du problème.
    • J'ai édité mon exemple pour inclure des lignes vides. Ce n'est pas le problème. L'erreur indique qu'il est en train d'essayer d'appeler split comme une méthode d'une valeur non définie. À un certain moment, pour quelque raison, message.message n'est pas une chaîne.
    • Bon, étrange parce que si je console.log(message.message) résultat est: optio\ns
    • Génial!.....
    • Merveilleux! Merci pour le partage!

    InformationsquelleAutor Roy J
  2. 8

    Ensemble contenant un espace blanc de style pré-ligne, comme dans:

    <div style="white-space: pre-line;">{{textWithLineBreaks}}</div>
    • Meilleure réponse ici. Pensez aussi à utiliser des white-space: pre-wrap, comme il n'a pas d'effondrement séquentielle des espaces comme pre-line.
    InformationsquelleAutor LMK
  3. 1

    Vous devez transformer vos données avant de le rendre à Vue.

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

    Je peux donner une réponse spécifique si vous partagez le code que vous travaillez avec.

    • Merci pour votre réponse. J'ai ajouté un composant ci-dessus que l'affichage de messages (voir edit)!
    • ma réponse allait être comme Roy J - me semble bon
    • Vous pouvez également utiliser une propriété calculée comme: lines() { return this.stringWithLineBreaks.split('\n'); }
    InformationsquelleAutor Max Heiber