Firebase + VueJS：突出顯示v-for循環中的數據

Question

我正在用Firebase和VueJS製作用戶/登錄/身份驗證系統。

我想知道如何突出顯示每個在線人員的姓名（在我的firebase- sessions -list中有一個條目）。

我的數據庫結構：

用戶：

- users: 
    - [userKey]: 
    - ... user information 

的會話：

- sessions: 
    - [userKey]: 
    - ... session information 

模板部分：

<table> 
    <tr class="user" v-for="user in $store.state.authentication.users"> 
    <td class="name">{{ user.name }}</td> 
    ... 
    </tr> 
</table> 

建議嗎？

Answer 1

您可以添加一個類TD如果用戶在線

<table> 
    <tr class="user" v-for="user in $store.state.authentication.users"> 
    <td class="name" v-bind:class="getUserStatusClass(user)"> 
     {{ user.name }} 
    </td> 
    ... 
    </tr> 
</table> 

您還可以添加到VUE實例的方法，像

methods: { 
    getUserStatusClass: function (user) { 
     if(// userKey is in sessons) { 
      return 'active' 
     } 

     return '' 
    } 
}, 

一個「積極的」 CSS類將被添加td如果用戶在線。比你可以編輯'有效'CSS類的樣式