VueJS: How to output a comma separated array?

Question

I know that in VueJS I can loop through an array:

<span v-for="(element, index) in list">{{ element }}</span>

But what if I wanted a list that is comma separated? For example, if list = ["alice", "bob", "chuck"], then the above would output:

<span>alice</span><span>bob</span><span>chuck</span>

What I want, though, is:

<span>alice</span>, <span>bob</span>, <span>chuck</span>

Is this possible?

Answer 1

If all you care about is comma separation, use Javascript's built-in join method:

{{ list.join(', ') }}

For arrays of objects, you could do something like this:

{{ list.map(entry => entry.title).join(', ') }}

Answer 2

You can use conditional rendering to hide last , like following:

var demo = new Vue({
  el: '#demo',
  data: function() {
    return {
      lists: ['Vue', 'Angular', 'React']
    };
  }
})

<script src="https://vuejs.org/js/vue.min.js"></script>
<div id="demo">
  <span v-for="(list, index) in lists">
    <span>{{list}}</span><span v-if="index+1 < lists.length">, </span>
  </span>
</div>

Answer 3

You could do it using a v-if attribute with a condition over the first argument, avoiding the usage of .length:

var app = new Vue({
  el: '#app',
  data: {
    list: ['john', 'fred', 'harry']
  }
})

<script src="https://vuejs.org/js/vue.min.js"></script><div id="app">
  <span v-for="(element, index) in list">
    <span v-if="index != 0">, </span><span>{{ element }}</span>
  </span>
</div>

Answer 4

What I ended up doing instead was:

<span v-for="element in list" class="item">
  <span>{{ element }}</span>
</span>

And in CSS:

.item + .item:before {
  content: ", ";
}

Answer 5

Solution using "template"

 <template v-for="(element, index) in list">
   <span>{{element}}</span><template v-if="index + 1 < list.length">, </template>
 </template>

Answer 6

Just adding another alternative which I prefer to use:

<span v-for="(item, index) in list">
    {{ item }}{{ (index+1 < list.length) ? ', ' : '' }}
</span>

Answer 7

If you wanted to do it the JS way, you can just do a computed property; you could even continue the span method.

computed {
  listCommaSeparated () { return this.list.join(', '); },
  listCommaSpans () { return '<span>' + this.list.join('</span><span>') + '</span>'; },
},

This would definitely be the preferred way from a rendering performance standpoint.

Answer 8

My component:

<template>
<ul v-if="model.length">
    <li v-for="item in model">{{item}}</li>
</ul>
</template>
<style scoped>
ul {
    list-style: none;
}
li {
    display: inline-block;
}
li:not(:last-child)::after {
    content: ", ";
}
</style>
<script>
export default {
    props: ['model']
};
</script>

Answer 9

Its possible sample
<span v-for="(item,i) in items"> {{(item !='' && i !=0) ? ',' : ''}} {{item.title}} </span>

Answer 10

If you do want control over how the dom looks (e.g. actually want to achieve the dom structure that you asked about), you can create a functional component like so:

<script>
// RenderList.vue
export default {
  functional: true,
  render(createElement, context) {
    // Read the list of entries by accessing the prop "list"
    const listEntries = context.props.list;

    // Return a custom list of elements for each list entry.
    // Only return a `,` if it's not the last entry.
    return listEntries.map((listElement, idx) => {
      return [
        createElement("span", listElement),
        idx < listEntries.length - 1 ? ", " : "",
      ];
    });
  },
};
</script>

You would use this component like so:

<template>
  <RenderList :list="['alice', 'bob', 'chuck']" />
</template>

Answer 11

May I suggest using i > 0 as check?

I've wrapped the separator so that {{ ' ' }} can be used for just having a space and avoiding span treated as being empty.

<span
    v-for="(item, i) in list"
    :key="i">
   <span v-if="i>0">{{ ', ' }}</span>
   <span class="text-nowrap">{{ item }}</span>
</span>

or

<span
    v-for="(item, i) in list"
    :key="i">
   <!-- if not wrapped in a span will leave a space before the comma -->
   <span>{{ (i > 0 ? ', ' : '') }}</span>
   <span class="text-nowrap">{{ item }}</span>
</span>

Answer 12

There are different views where using :after or :before to have a comma is not a good idea with respect to browser not handling it as a string when the window is resized.

If we try to use conditional operator in each iteration to check whether it is the first or the last element, it would be an overhead if we have large number of items. Also the conditions will be re-evaluated whenever we have change detection.

To overcome these 2 things, we can enclose the comma in a separate element and hide it using CSS :last-child selector as

<template v-for="item in list">
    <span class="item">
        {{item}}
        <span class="comma">
            ,
        </span>
    </span>
</template>

and in CSS

.item:last-child .comma {
    display: none;
}