samedi 26 décembre 2015

How to compare v-if with a value in Vue.js

I have the following data and I wish to check if the user has the Admin role.

{
    "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"
            }
          }
        ],
      }
    ]
  } 

In my html I have the following, but how can I use the v-if directive to check if the user has the Admin role? The other problem is that v-if directive below also generates unnecessary html markup if the condition is untrue.

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

Aucun commentaire:

Enregistrer un commentaire