Suggestion: "v-glue" (v-for element joins)

[furey]

When v-for lists are rendered, they do so without any space between elements.

For example:

<ol class="breadcrumb">
    <li v-for="n in 3"><a>Crumb {{ n+1 }}</a></li>
</ol>

renders as:

<ol class="breadcrumb">
    <li><a>Crumb 1</a></li><li><a>Crumb 2</a></li><li><a>Crumb 3</a></li>
</ol>

Because of this, and due to a known issue in Bootstrap, the above breadcrumb's separator spacing will display incorrectly (note the spacing on the left of a separator is smaller than on the right):

To work around this (I'm writing a breadcrumb component), I run the v-for loop in a <template> wrapper so I can append a <slot> containing a blank space after each <li> element, like so:

<ol class="breadcrumb">
    <template v-for="n in 3">
    <li><a>Crumb {{ n+1 }}</a></li>
    <slot> </slot>
    </template>
</ol>

which renders as:

<ol class="breadcrumb">
    <li><a>Crumb 1</a></li>
    <li><a>Crumb 2</a></li>
    <li><a>Crumb 3</a></li>

</ol>

and corrects the separator spacing problem.

To avoid such a workaround, I was wondering if there's any interest in the idea of a v-glue directive for v-for loops, as a way to pass an expression/value to the loop to be used as the glue that joins each item of the loop together?

For example, the problem above could be negated by simply passing v-glue=" " like so:

<ol class="breadcrumb">
    <li v-for="n in 3" v-glue=" ">Crumb {{ n+1 }}</li>
</ol>

which would render as (note the spaces between the <li> tags):

<ol class="breadcrumb">
    <li><a>Crumb 1</a></li> <li><a>Crumb 2</a></li> <li><a>Crumb 3</a></li>
</ol>

I can imagine other creative applications of such a feature, e.g. dividers between panels, etc.

Interested to hear your thoughts!

[vprimachenko]

in regard to #1842 i think this wont be needed and could be replaced with

<ol class="breadcrumb">
    <template v-for="n in 3">
    <li><a>Crumb {{ n+1 }}</a></li>
    {{$last?'':' '}}
    </template>
</ol>

[yyx990803]

Although I can see where you are coming from, I don't think an edge case like this justifies a special directive in Vue.js core, especially when it is caused by a bug in another library...

[furey]

@vprimachenko Thanks for the reply.

@yyx990803 Gotcha. Cheers.

[mn113]

It's also annoying when v-for generates html like this:
<span>tag 1</span><span>tag 2</span><span>tag 3</span>...

When the tag list gets long it won't linebreak at all.

Sometimes developers forget, there's more to writing html than just what's inside the tags.

[itzikbenh]

I'm suffering from this now as well. This is actually a bug. it must render a space between tags.

<span class="tag is-info" v-for="(filter, index) in filters">
    {{ filter.text }}
    <button class="delete is-small"></button>
</span>

All tags are rendered with no spacing.

[jordyvandomselaar]

You could put the html of an entire website on one line and it should still work, doubt this is a bug as it's generated html. Jade/Pug does the same thing. As long as your source looks proper it shouldn't matter what the generated html looks like (As long as it's valid html).

[neclimdul]

You could put the html of an entire website on one line and it should still work, doubt this is a bug as it's generated html.

Spaces between tags are legitimately different HTML though this is really only a problem with inline elements like both reporters are using because that's the only time it really affects layout. https://jsfiddle.net/tqzwh62d/1/

In my experience it is generally the problem that developers need to remove space between tags to stop browsers from affecting layout because you want to control the spacing very specifically with CSS so the current behavior is definitely the sane choice. I can see where there are times where you might want to trigger that behavior.

I do wonder if you could work around it with a

#component span:after{ content: " "; }

though.

[ssc-hrep3]

A simple workaround would be to use

<template v-for="n in 3">
  <span :key="n">iteration {{n}}</span>
  {{ ' ' }}
</template>

Adding a space between elements is not directly possible, but you can move the v-for to a parent <template/>, which results in the expected outcome. You could also replace the space with a non-breaking space ( ).

[TheJaredWilcurt]

Here are 5 different approaches for those out there looking for a v-join or v-glue or $last or v-trim. And also explanations of what those other 4 things would be if added to Vue's API.

• https://jsfiddle.net/vjmhtgsy/333/

[moaxcp]

I just started working with Vue and doing frontend for the first time at work. This is one of the first things I am looking for in the framework. Joining strings in any type of template framework shouldn't be this difficult. I don't think it is an edge case.

For me I am trying to join router links for each term in a path.

    <div v-if="searchPath">
        <router-link v-for="term in searchPath" v-bind:key="term" :to="{ name: 'options', params: { option: term }}">{{ term }}</router-link>
    </div>

It would be nice to be able to join with a '>' between links.

[xploSEoF]

I don't think this is an edge-case - I'd like to use it to put <hr> tags between items, and we're forever adding "glue" in funky ways, like the time of an item if it differs from the last, etc.

Maybe glue should be like a slot with before and after bindings.