Tengo los siguientes datos y quiero comprobar si el usuario tiene el rol de Administrador.

{
    "users": [
      {
        "id": 3,
        "first_name": "Joe",
        "last_name": "Blogs",
        "roles": [
          {
            "id": 1,
            "name": "Admin",
            "created_at": "2015-12-25 15:58:28",
            "updated_at": "2015-12-25 15:58:28",
            "pivot": {
              "user_id": 3,
              "role_id": 1,
              "created_at": "2015-12-25 16:03:09",
              "updated_at": "2015-12-25 16:03:09"
            }
          },
          {
            "id": 2,
            "name": "Member",
            "created_at": "2015-12-25 15:58:28",
            "updated_at": "2015-12-25 15:58:28",
            "pivot": {
              "user_id": 3,
              "role_id": 2,
              "created_at": "2015-12-25 16:03:09",
              "updated_at": "2015-12-25 16:03:09"
            }
          }
        ],
      }
    ]
  } 

En mi html tengo el siguiente, pero ¿cómo puedo usar el v-si la directiva para comprobar si el usuario tiene el rol de Administrador? El otro problema es que la v-si la directiva de abajo también genera innecesario el marcado html si la condición es falsa.

    <tr>
        <th>User</th>
        <th>Admin</th>
        <th></th>
    </tr>
    <tr v-for="user in users">
          <td>
               @{{user.first_name}} @{{user.last_name}}
          </td>
          <td>
              <span v-for="role in user.roles">
                   <span v-if="role.name" == 'Admin'>Yes</span>
                   <span v-else>-</span>
              </span>
          </td>
    </tr>
InformationsquelleAutor adam78 | 2015-12-26

1 Comentario

  1. 18

    Usted tiene un problema de sintaxis en usted html, debe ser:

    <span v-for="role in user.roles">
        <span v-if="role.name == 'Admin'">Yes</span>
        <span v-else>-</span>
    </span>
    

    Usted todavía tendrá extra permisibles para cada rol que tiene el usuario, sin embargo.

    Es más fácil usar un método para comprobar si un usuario tiene el rol de administrador y de esa manera usted no tiene el extra de html:

    <div id="container">
      <table>
        <tr>
          <th>User</th>
          <th>Admin</th>
          <th></th>
        </tr>
        <tr v-for="user in users">
          <td>
            {{user.first_name}} {{user.last_name}}
          </td>
          <td>
            {{isAdmin(user)}}
          </td>
        </tr>
      </table>
    </div>
    

    Y el javascript:

    new Vue({
      el: '#container',
      data: {
        "users": [{
          "id": 3,
          "first_name": "Joe",
          "last_name": "Blogs",
          "roles": [{
            "id": 1,
            "name": "Admin",
            "created_at": "2015-12-25 15:58:28",
            "updated_at": "2015-12-25 15:58:28",
            "pivot": {
              "user_id": 3,
              "role_id": 1,
              "created_at": "2015-12-25 16:03:09",
              "updated_at": "2015-12-25 16:03:09"
            }
          }, {
            "id": 2,
            "name": "Member",
            "created_at": "2015-12-25 15:58:28",
            "updated_at": "2015-12-25 15:58:28",
            "pivot": {
              "user_id": 3,
              "role_id": 2,
              "created_at": "2015-12-25 16:03:09",
              "updated_at": "2015-12-25 16:03:09"
            }
          }],
        }]
      },
      methods: {
        isAdmin: function(user) {
          var i;
          for (i = 0; i < user.roles.length; i++) {
            if (user.roles[i].name === "Admin") {
              return "Yes";
            }
          }
    
          return "-";
        }
      }
    });
    

    Ejemplo de trabajo aquí: https://jsfiddle.net/gmsa/t56oo4tw/

    • Bueno..funciona como un encanto!
    • Genial! Yo estaba tratando de comparar con comillas dobles. 😀

Dejar respuesta

Please enter your comment!
Please enter your name here