Firebase + VueJS：v-forループ内のデータを強調表示

Question

FirebaseとVueJSでuser-/login-/authentication-systemを作っています。

私は、オンラインの各人の名前をどのように強調表示するのだろうか（私の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

あなたは

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

     return '' 
    } 
}, 

のように「アクティブ」CSSクラスが追加され、ユーザーはオンライン

<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するメソッドを追加する必要がtdのためのクラスを追加することができますユーザーがオンラインの場合はtdになります。 「アクティブな」CSSクラスのスタイルを編集できるよりも