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

Question

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 1

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>