Vue.jsは空白を表示します（改行）

Question

vue.jsに行スペースをどのように表示しますか？今すべてが互いの後です....

すでにこの試みた：

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

をしかし、何も仕事をしないようです。今3日間これを試してみましょう。

私はVue.js 1.0とbrowserifyを使用しています。

ありがとうございます！

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

私はこのようにそれを行う：

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

それが唯一のコンマのが追加されます。あなたはVueのでそれをレンダリングする前にデータを変換する必要が

--EDIT--

Answer 1

メッセージを分割すると、複数のデータ項目が得られます。これは、v-forで処理する必要があります。

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>

Answer 2

。

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

作業するコードを共有すると、より具体的な回答が得られます。