从Vue.js和Vuetify.js中的函数获取表中的数据

Question

I'm trying to output a table, but it's printing just one row. How can i fix it? I've tried different things (Vanilla JS worked). It's for study purposes and i'm kinda new in JS and Vue.js in general. This is the table:

                                  <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 header:

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 the sample of the function that is called, and every other function is similar.

What i see

Answer 1

From my comment:

From what I can tell, the object containing your data, houses, is an array of objects with a length of 1. This means that your table will only end up printing 1 row containing the data that you provided. I'd recommend building your full set of data prior to creating the table.

Here's a an example that may help clarify what I was attempting to convey in my comment. Note that it's not perfect and may need to be modified depending on the structure of your input.

 data: () => { return { headers: [{ text: 'Full Name', value: 'name' }, { text: 'Party', value: 'party' }, { text: 'State', value: 'state' }, { text: 'Seniority', value: 'seniority' }, { text: '% Votes', value: 'votes' }], // Only initialize the container for our data, // it will be populated once the component is created houses: [] } }, created: () => { // Get the data that we want to pull our houses from let input = data_house.results[0].members // Loop through our data input.forEach((member) => { // At each iteration, pull the relevent data and append it to our houses array houses.push({ name: member.name, party: member.party, state: member.state, seniority: member.seniority, votes: member.votes, }) }) } 

 <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>