### From the Docs on [List Rendering > `v-for` on a `<template>`][1]

> Similar to template `v-if`, you can also use a `<template>` tag with `v-for` to render a block of multiple elements. For example:
>
>```html
><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 `&#32;`][2] 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>&lt;template v-for="fruit in fruits" &gt;
  &lt;span&gt;{{fruit}}&lt;/span&gt;<b>&amp;#32;</b>
&lt;/template&gt;</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>&lt;template v-for="fruit in fruits" &gt;
  &lt;span&gt;{{fruit}}&lt;/span&gt;<b>&lt;slot&gt; &lt;/slot&gt;</b>
&lt;/template&gt;</code></pre>



<pre><code>&lt;template v-for="fruit in fruits" &gt;
  &lt;span&gt;{{fruit}}&lt;/span&gt;<b>{{ ' ' }}</b>
&lt;/template&gt;</code></pre>


If you only want spaces *in-between* elements, you can output the space conditionally:



<pre><code>&lt;template v-for="<b>(fruit, i)</b> in fruits" &gt;
  &lt;span&gt;{{fruit}}&lt;/span&gt;<b>{{ i &lt; fruits.length -1 ? ', ': '' }}</b>
&lt;/template&gt;</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**][3]

[1]: https://v2.vuejs.org/v2/guide/list.html#v-for-on-a-lt-template-gt
[2]: https://www.compart.com/en/unicode/U+0020
[3]: https://github.com/vuejs/vue/issues/1841

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](https://jsfiddle.net/mq4hc614/).

How can I counter this behaviour ?