[英]Vue.js show white space (line breaks)
How would I show line space in vue.js. 我如何在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 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 -_-. 现在尝试3天-_-。
I'm using Vue.js
1.0 and browserify
. 我使用Vue.js
1.0和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-- - 编辑 -
When you split the message, you get multiple data items, which you should handle with a v-for
. 拆分消息时,您将获得多个数据项,您应该使用v-for
处理这些数据项。
But also see LMK's answer wherein you don't have to split the message. 但另请参阅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>
将容器空白样式设置为预行,如:
<div style="white-space: pre-line;">{{textWithLineBreaks}}</div>
You have to transform your data before rendering it with Vue. 在使用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. 如果您分享您正在使用的代码,我可以给出更具体的答案。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.