Vuejs v-for on inline elements trims whitespace

From the Docs on List Rendering > v-for on a <template>

Similar to template v-if, you can also use a <template> tag with v-for to render a block of multiple elements. For example:

<ul>  <template v-for="item in items">    <li>{{ item.msg }}</li>    <li class="divider" role="presentation"></li>  </template></ul>

So in order to get sibling elements (and yeah, a breaking space character   would count as one), you'll have to add the loop to a parent <template> container and then include any elements / spacing you want in the looped contents like this:

<template v-for="fruit in fruits" >  <span>{{fruit}}</span>&#32;</template>

As of Vue 2.x+, templates trim any breaking space characters, even if they are escaped.

Instead, you can add a slot or text interpolation like this:

<template v-for="fruit in fruits" >  <span>{{fruit}}</span><slot> </slot></template>

<template v-for="fruit in fruits" >  <span>{{fruit}}</span>{{ ' ' }}</template>

If you only want spaces in-between elements, you can output the space conditionally:

<template v-for="(fruit, i) in fruits" >  <span>{{fruit}}</span>{{ i < fruits.length -1 ? ', ': '' }}</template>

Demo in Stack Snippets

var app = new Vue({    el: '#app',    data: {        fruits: ["apple", "banana", "carrot"]    }});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.0/vue.js"></script><div id="app">    <template v-for="(fruit, i) in fruits" >      <span>{{fruit}}</span>{{ i < fruits.length -1 ? ', ': '' }}    </template></div>