Using vue.js and v-for I want to generate a list of <span> elements that are separated by ", ".

Is there a simple solution for this in vue.js?

In JavaScript I would do a users.join(", ").

Or in FreeMarker templates you can use quite fancy things with lists I enjoy to use, e.g.

<#list users as user>
  <span>
    ${user}<#sep>, </#sep>
  </span>
<#else>
  <p>No users</p>
</#list>

In vue I haven't discovered something similar yet. (Well, the else-part can be done using v-if and v-else of course.) Did I miss something?

Or what would be an alternative solution? I was thinking of using a template a generate the separator if this is not the last index by comparing the current index with the length of the array. However, this wouldn't work if I iterate over the properties of an object.

Using vue.js and v-for I want to generate a list of <span> elements that are separated by ", ".

Is there a simple solution for this in vue.js?

In JavaScript I would do a users.join(", ").

Or in FreeMarker templates you can use quite fancy things with lists I enjoy to use, e.g.

<#list users as user>
  <span>
    ${user}<#sep>, </#sep>
  </span>
<#else>
  <p>No users</p>
</#list>

In vue I haven't discovered something similar yet. (Well, the else-part can be done using v-if and v-else of course.) Did I miss something?

Or what would be an alternative solution? I was thinking of using a template a generate the separator if this is not the last index by comparing the current index with the length of the array. However, this wouldn't work if I iterate over the properties of an object.

• javascript
• vue.js
• freemarker
• v-for

3 Answers 3

Yes. It requires using the <template> element as a no-tag container and the index property in the list.

<div>
  <template v-for="(user, index) in users">
    <template v-if="index > 0">,</template>
    <span>{{user}}</span>
  </template>
</div>

You could use a computed property and return the regular JS version, then you don't need a v-for at all. Might be a better way if you want or need to do the logic in the template. Here's a fiddle

Template:

<div id="app">
  <h2>Users:</h2>
  <span>
    {{ listUsers }}
  </span>
</div>

JS:

new Vue({
  el: "#app",
  data: {
    users: [
      'Jim',
      'John',
      'Sarah',
      'Steve'
    ]
  },
  computed: {
    listUsers() {
        return this.users.join(', ')
    }
  }
})

EDIT:

If you want to iterate over object properties you could use Object.keys just inside a computed property as well and map the properties to an array then join as regular.

Here's a fiddle for that

Template:

<div id="app">
  <span>
    {{ listProps }}
  </span>
</div>

JS:

new Vue({
  el: "#app",
  data: {
    user: {
      name: 'Dwight',
      age: 32,
      animal: 'Bears',
      food: 'Beets',
      show: 'Battlestar Galactica'      
    }
  },
  computed: {
    listProps() {
      return Object.keys(this.user).map(key => `${key}: ${this.user[key]}`).join(", ");
    }
  }
})

With array of strings you can do it like this:

 <span v-if="users && users.length > 0">
   <template v-for="(user, index) in users">
     <template v-if="index < users.length - 1">
       {{ user }},
     </template>
     <template v-else>
       {{ user }}
     </template>
   </template>
 </span>
 <p v-else>
   No users
 </p>

What you mean by "iterate over the properties of an object"?