Vue - check if you are on the last prop of a v-for loop

vue.js v-for
Mankind1023 picture Mankind1023 · Mar 11, 2017 · Viewed 49.6k times · Source

If I have the following data property:

person: {name: 'Joe', age: 35, department: 'IT'}

And wanted to loop through and output it as follows:

name: Joe, age: 35, department: IT

So far I have:

<span v-for="(val, key) in person">{{key}}: {{val}}, </span>

But this displays:

name: Joe, age: 35, department: IT,

with an extra comma on the end, how can I have it detect that it's the last prop and not show the comma? I thoughta v-show or v-if may be the solution but can't quite figure out how to make it work.

Answer

Bert picture Bert · Mar 11, 2017

Here is one way.

<span v-for="(val,key,index) of person">
  key: {{key}}, val: {{val}}, index: {{index}}
  <span v-if="index != Object.keys(person).length - 1">, </span>
</span>

Related questions

Vue Js - Loop via v-for X times (in a range)

How can I repeat a loop via v-for X (e.g. 10) times? // want to repeat this (e.g.) 10 times <ul> <li v-for="item in shoppingItems"> {{ item.name }} - {{ item.price }} </li> </ul> …

Read More
v-for and v-if not working together in vue.js

A form is used to submit text and two options which tell vue which column to display the text in. When the col2 radio button is checked the submitted text should display in column 2. This is not happening, on column 1 …

Read More
Vue.js v-for loop from an object key and nested array

I have quiet a complex v-for loop inside another v-for. Basically displays a list of questions and a list of answers for that question. I plan on getting the key for the question and using that for the key for …

Read More