I am getting the information through json in a vuejs template that I made to be able to create a table with certain data, these data are: Profiles, which contains permissions, they can be 1 or many permissions, and I have to make a table in the which the name of the profile is shown in the first column, and with the html rowspan property tell it how many rows it will have to combine according to the number of permissions, that the permissions in turn contain other data.
<template>
<table id="user_list" class="table table-striped table-hover table-condensed">
<thead>
<tr>
<th>Perfil</th>
<th>Permiso</th>
<th>crear</th>
<th>leer</th>
<th>modificar</th>
<th>eliminar</th>
<th>Accion</th>
</tr>
</thead>
<tbody>
<tr v-for="perfil in perfiles">
<td> {{ perfil.nombre_perfil }} </td>
<tr v-for="permiso in perfil.permisos">
<td> {{ permiso.nombre_permiso }}</td>
<td> {{ permiso.create }}</td>
<td> {{ permiso.read }}</td>
<td> {{ permiso.update }} </td>
<td> {{ permiso.delete }} </td>
<td> <button class="fa fa-floppy-o fa-2x"></button></td>
</tr>
</tr>
</tbody>
</table>
I receive the json in the profiles array where all the data is, but when I do this the error I get is:
[Vue warn]: Property or method "perfil" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option
then the error below is:
[Vue warn]: Error in render function: "TypeError: Cannot read property 'permisos' of undefined"