Nested v-for in vuetify v-simple-table - How to get rid of empty spaces?

Question

I want to display the following data (Object) in a simple vuetify table (v-simple-table). This data is stored in the variable allPools

[ 
{ 
    "pool_2": { 
        "company_name": "Testcompany1" 
        "job_title": "Testtitle1", 
        "job_location": "Testcity1", 
        
    }, 
     
    "pool_3": { 
        "company_name": "Testcompany1", 
        "job_title": "Testtitle2" 
        "job_location": Testcity2, 
        
    }, 
    "pool_id": "asdf12345" 
}, 

{ 
    "pool_0": { 
        "company_name": "Testcompany2", 
        "job_title": "Testtitle3", 
        "job_location": Testcity3, 
        
    }, 
        
    "pool_3": { 
        "company_name": "Testcompany2", 
        "job_title": "Testtitle4", 
        "job_location": Testcity4,  
    }, 
    "pool_id": "dfghj45645" 
} 

]

I use the following code to display the data (vuejs with vuetify):

<v-card>
    <v-card-text>                      
        <v-simple-table height="300">
            <template v-slot:default>
            <thead>
                <tr>
                <th class="text-left">
                    Company
                </th>
                <th class="text-left">
                    Job title
                </th>
                <th class="text-left">
                    Job location
                </th>
                </tr>
            </thead>
            <tbody v-for="(pool, index) in allPools" :key="index">
                <tr v-for="(p, index) in pool" :key="index">
                    <!-- COMPANY NAME - START -->
                    <td v-if="p.company_name">
                        {{ p.company_name }}
                    </td>
                    <td v-else>
                        ---
                    </td>
                    <!-- COMPANY NAME - START -->

                    <!-- JOB TITLE - START -->
                    <td v-if="p.job_title">
                        {{ p.job_title }}
                    </td>
                    <td v-else>
                        ---
                    </td>
                    <!-- JOB TITLE - START -->

                    <!-- LOCATION - START -->
                    <td v-if="p.job_location">
                        {{ p.job_location }}
                    </td>
                    <td v-else>
                        ---
                    </td>
                    <!-- LOCATION - END -->
                </tr>   
            </tbody>
            </template>
        </v-simple-table>
    </v-card-text>
</v-card>

And i get the following result:

The problem is, I always have the empty lines in between data. I know it is because i have the v-for loop located in the tab but i couldn't find any other solution. Does anybody know how i can iterate though a nested v-for loop and display it properly in a v-simple table??

Thanks

• Chris

Answer 1

The first loop shouldn't be in the tbody element, try to add it to a virtual element template :

 <tbody  >
   <template  v-for="(pool, index) in allPools">
                <tr v-for="(p, index) in pool" :key="index">
                 .....
                </tr>   
   </template>
</tbody>