Vuejs user role

by gmsa

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/vue/latest/vue.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<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>

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 "-";
    }
  }
});