Menu
I'm using vue.js on my app, and when displaying some content, vue is removing spaces when there's more than one space between words. Unfortunately I can't reproduce this on a fiddle (not sure why). I'm not familiar with vue (I'm more of a back-end), so I'm sorry for the lack of details. The HTML code to display is this: <div slot="body" v-html="viewingEmail.message"></div>. And a sample content would be any phrase that has two spaces, example: Hello, how are you?. On that case, the app will display Hello,how are you?
Our vue dependencies are:
"vue": "^2.4.2",
"vue-cookie": "^1.1.4",
"vue-flatpickr": "^2.3.0",
"vue-js-toggle-button": "^1.1.2",
"vue-loader": "^11.3.4",
"vue-resource": "^1.0.3",
"vue-select": "^2.2.0",
"vue-slider-component": "^2.3.6",
"vue-star-rating": "^1.4.0",
"vue-template-compiler": "^2.4.2",
"vue2-dropzone": "^2.2.7",
"vuedraggable": "^2.15.0",
"vuejs-paginate": "^1.1.0",
"vuex": "^2.2.1",
288
trim function is used to remove whitespace from both sides of the string, not from in-between.
The trim() method removes whitespace from both ends of a string and returns a new string, without modifying the original string. Whitespace in this context is all the whitespace characters (space, tab, no-break space, etc.) and all the line terminator characters (LF, CR, etc.).
Vue is lightweight and easy to ]write. Owing to its use of components and familiar templating syntax, migrating or integrating into current projects to Vue. js is smoother and faster. Hence, Vue is an excellent choice for start-ups but can be utilized in large-scale apps.
Vue is not trimming spaces. That's just how HTML works.
The space is there, see demo below.
new Vue({
el: '#app',
data: {
message: 'Hello, Vue.js!'
},
mounted() {
console.log('Notice how the spaces exist in HTML, even though they are not displayed.');
console.log('divHTML', this.$refs.divHTML.outerHTML);
console.log('divTEXT', this.$refs.divTEXT.outerHTML);
}
})<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>
<div id="app">
v-html: <div v-html="message" ref="divHTML"></div>
v-text: <div v-text="message" ref="divTEXT"></div>
</div>You could just replace space chars with a HTML entity, but that would mess nested elements' attributes.
My suggestion: use white-space: pre-wrap; style.
See demo below.
new Vue({
el: '#app',
data: {
message: 'Hello, Vue.js!'
}
}).keep-spaces { white-space: pre-wrap; }<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<div id="app">
<h3>With "white-space:pre-wrap;" spaces are preserved visually.</h3>
v-html: <div v-html="message" class="keep-spaces"></div>
v-text: <div v-text="message" class="keep-spaces"></div>
</div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
