title: How to compare v-if with a value in Vue.js
body: <p>I have the following data and I wish to check if the user has the Admin role.</p>
  
  <pre><code>{
      "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"
              }
            }
          ],
        }
      ]
    } 
  </code></pre>
  
  <p>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.</p>
  
  <pre><code>    &lt;tr&gt;
          &lt;th&gt;User&lt;/th&gt;
          &lt;th&gt;Admin&lt;/th&gt;
          &lt;th&gt;&lt;/th&gt;
      &lt;/tr&gt;
      &lt;tr v-for="user in users"&gt;
            &lt;td&gt;
                 @{{user.first_name}} @{{user.last_name}}
            &lt;/td&gt;
            &lt;td&gt;
                &lt;span v-for="role in user.roles"&gt;
                     &lt;span v-if="role.name" == 'Admin'&gt;Yes&lt;/span&gt;
                     &lt;span v-else&gt;-&lt;/span&gt;
                &lt;/span&gt;
            &lt;/td&gt;
      &lt;/tr&gt;
  </code></pre>