Vue trimming white spaces

Question

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

Answer 1

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>