Question

我正在使用Firebase和VueJS制作用户/登录/身份验证系统。

我想知道如何突出显示在线人员的姓名（在我的火力库中有一个条目 - sessions - 列表）。

我的数据库结构：

用户

：

- 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类

的样式

Firebase + VueJS：突出显示v-for循环中的数据

1 个答案: