I have two columns with name and age.The jason returns the following object.I would to return the value under name and age column.
Students: {
details: [
{ John: 21 },
{ Brian: 22 },
{ Ryan: 21 },
<tbody>
<tr v-for= "(item,index) in Students.details" :key="index" >
<td ">
{{item --(should display name)}}
</td>
<td">
{{item --(should display age)}}
</td >
</tr>
</tbody>
This could work out:
<tbody>
<tr v-for= "(item, index) in Students.details" :key="index" >
<td>
{{Object.keys(item)[0]}}
</td>
<td>
{{item[Object.keys(item)[0]]}}
</td >
</tr>
</tbody>
There are many ways to solve your problem, but I suggest to arrange the data first to a simpler form then render them. For example, use computed to change the form first.
computed: {
dataArray() {
return Object.keys(this.Students).map(name => {
return {
name: name,
age: this.Students[name]
}
})
}
}
// you can get an array [{name: "John", age: 21}, {name: "Brian", age: 22}, ...]
Then in the template just show the data:
<tr v-for= "item in dataArray" :key="item.name">
<td>
{{ item.name }}
</td>
<td>
{{ item.age }}
</td >
</tr>
