When trying to display a table, only one row is being printed. How can I resolve this issue? I have attempted various solutions (Vanilla JS worked). This project is for educational purposes and I am relatively new to JS and Vue.js.
<template>
<v-data-table
:headers="headers"
:items="houses"
class="elevation-1"
>
<template v-slot:items="data">
<td class="text-xs-left">{{ data.item.name }}</td>
<td class="text-xs-left">{{ data.item.party }}</td>
<td class="text-xs-left">{{ data.item.state }}</td>
<td class="text-xs-left">{{ data.item.seniority }}</td>
<td class="text-xs-left">{{ data.item.votes }}</td>
</template>
</v-data-table>
</template>
This is the header:
headers: [
{ text: 'Full Name', value: 'name' },
{ text: 'Party', value: 'party' },
{ text: 'State', value: 'state' },
{ text: 'Seniority', value: 'seniority' },
{ text: '% Votes', value: 'votes' }
],
houses: [
{
name: getNameHouse(),
party: getPartyHouse(),
state: getStateHouse(),
seniority: getSeniorityHouse(),
votes: getVoteHouse()
},
]
This is the function snippet that retrieves the party affiliation:
function getPartyHouse (){
var JSONhouse = data_house,
jHouseLen = JSONhouse.results[0].num_results;
for (var i = 0; i < jHouseLen; i ++ ){
return JSONhouse.results[0].members[i].party;
}
}
This is just an example of the function used, with similar functions for other data retrieval tasks.