如何將v-if與Vue.js中的值進行比較

Question

我有以下數據，我希望檢查用戶是否具有管理員角色。

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

在我的HTML我有以下，但如何使用V-if指令，以檢查用戶是否具有管理員角色？另一個問題是，如果條件不真實，下面的v-if指令也會生成不必要的html標記。

<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

你對你的HTML語法問題，它應該是：

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

你仍然將爲每個用戶有角色額外的跨度，雖然。

所以，很簡單的使用方法來檢查，如果一個用戶具有管理員角色，這樣你不會有多餘的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> 

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

工作這裏的例子：https://jsfiddle.net/gmsa/t56oo4tw/