如何在vue中显示线条空间.js.现在一切都在彼此追逐....

已经试过了:

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

但似乎什么都不管用.现在试了三天.

我用的是Vue.js 1.0和browserify.

谢谢!

--编辑--

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

当我这样做的时候:

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

它只添加逗号.

--编辑--

enter image description here

推荐答案

拆分消息时,会得到多个数据项,应该使用v-for进行处理.

但也可以看到LMK的答案,其中你不必拆分信息.

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>

Vue.js相关问答推荐

Vue.js编译的render函数不起作用

我如何使用vuejs访问彼此嵌套的json对象

Vue 3 在一个值更改问题后再次重新渲染每一行

如何解决 importers[path] is not a function for clean Vue 3/Vite/Storybook installation

在组件之间共享 websocket 连接

在keyup Vuejs 2上获取输入值

使用 jquery-chosen 插件更新 vuejs 模型值

在 Vue 项目之间共享assets和组件

VueJS 将 HTML 打印到页面

为什么Vue.js 使用单字标签

SVG 加载 vue-svg-loader; [Vue 警告]:无效的组件定义

如何使用 vue.js 获取所选选项的索引

带有子菜单的 Vuetify 导航抽屉

动态注册本地 Vue.js 组件

Vue CLI - 将构建输出组合到单个 html 文件

在路由更改之前显示确认对话框

如何让 vuetify 数据表在卡片内时跨越容器的整个宽度?

如何使用 Vue Test utils 测试输入是否聚焦?

如何将props传递给组件的故事?

Vue.js 无法读取 null 的属性 length长度