1

Estoy obteniendo la informacion a traves de json en un template de vuejs que hice para poder crear una tabla con ciertos datos, estos datos son: Perfiles, los cuales contiene permisos, pueden ser 1 o muchos permisos, y tengo que hacer una tabla en la cual se muestre en la primer columna el nombre del perfil, y con la propiedad rowspan de html decirle cuantas filas tendra que combinar segun la cantidad de permisos, que los permisos a su ves contienen otros datos.

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

el json lo recibo en el array perfiles es donde estan todos los datos, pero al momento de hacer esto asi el error que me sale es:

    [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

luego el error de abajo es:

  [Vue warn]: Error in render function: "TypeError: Cannot read property 'permisos' of undefined"

1 respuesta 1

3

Los errores surgen debido a que tienes errores en el markup.

  • Un tr no puede contener otro tr.

Solución:

Podrías hacerlo modificando el markup así:

  • Por cada perfile creamos un tbody, ya que un table puede contener cero o mas tbody.
  • Por cada permiso del perfile creamos un tr.

Demo:

new Vue({
  el: '#user_list',
  data: {
    perfiles: [{
      nombre_perfil: 'Juan',
      permisos: [{
        nombre_permiso: 'Usuarios',
        create: true,
        read: true,
        update: true,
        delete: true
      },{
        nombre_permiso: 'Noticias',
        create: true,
        read: true,
        update: true,
        delete: true
      }]
    },{
      nombre_perfil: 'Pedro',
      permisos: [{
        nombre_permiso: 'Usuarios',
        create: false,
        read: true,
        update: false,
        delete: false
      },{
        nombre_permiso: 'Noticias',
        create: true,
        read: true,
        update: true,
        delete: true
      }]
    }]
  }
})
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<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 v-for="perfil in perfiles">
    <tr>
      <td v-bind:rowspan="perfil.permisos.length + 1"> {{ perfil.nombre_perfil }} </td>
    </tr>
    <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>
  </tbody>
</table>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.