Vuejs v-for on inline elements trims whitespace

When looping over an array (or object) with v-for on an inline element, vuejs does not render whitespace around said element.

For example, I have this html:

<div id="app">
    Vue Rendering<br>
    <a v-for="fruit in fruits" v-bind:href="fruit.url" v-html="fruit.label"></a>
        
    </div>
    <div>
    Navite rendering<br>
    <a href="apple.html">Apple</a>
    <a href="banana.html">Banana</a>
    <a href="peach.html">Peach</a>
</div>

and this javascript:

var fruits = [
    {
        label: 'Apple',
        url: 'apple.html'
    },
    {
        label: 'Banana',
        url: 'banana.html'
    },
    {
        label: 'Peach',
        url: 'peach.html'
    }
];

var app = new Vue({
    el: '#app',
    data: {
        fruits: fruits
    }
});

When Vue renders this, it deletes the spaces between the links. See this jsfiddle.

How can I counter this behaviour ?

Answer

December 2, 2018

KyleMit

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:

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

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:

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

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

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

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>

Further Reading:
Issue #1841 - Suggestion: v-glue / v-for element joins

Answer

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

Demo in Stack Snippets

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