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

Question

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>

Answer 1

You have a syntax problem on you html, it should be:
<span v-for="role in user.roles">
<span v-if="role.name == 'Admin'">Yes</span>
<span v-else>-</span>
</span>
You will still have extra spans for each role the user has, though.
It's simpler to use a method to check if a user has the admin role and that way you won't have the extra 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>
And the 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 "-";
}
}
});
Working example here: https://jsfiddle.net/gmsa/t56oo4tw/