Javascript 在Vue.js中接收firebase数据后调用函数

我正在用vue和firebase制作一个聊天应用程序，需要调用一个函数在加载后将样式添加到收到的数据中。是否有一些钩子可以从firebase中获取以进行监听，或者当所有聊天消息都呈现出来时，我可以监听DOM吗？ 我读到你可以在“挂载”中做一些事情，但我不明白。也许这只是针对vue，而对于firebase数据可能没有那么多

以下是我的srcipt：

import * as firebase from 'firebase'

export default {
    name: 'chat',
    data: function(){
        return {
            room: null,
            db: null, // assign Firebase SDK later
            messageInput:'', // this is for v-model
            messages: [],
        }
    },
    mounted: function() {
        //initilize a Firebase reference
            this.db = firebase
            this.init()
    },
    methods: {
        init(){
        this.room = this.db.database().ref().child('chatroom/3')
        this.messageListener()
    },
    saveEmail() {
            firebase.auth().onAuthStateChanged((user) => {
                this.$root.useremail = user.email;
            })
        },
        send(messageInput) {
            this.saveEmail()
            // var email = this.$root.useremail;
            //A data entry.
            let data = {
                message: messageInput,
                user: this.$root.useremail
            };
            // Get a key for a new message.
            let key = this.room.push().key;
            this.room.child('messages/' + key).set(data)
            // clean the message
            this.messageInput = ''
        },
        emailMatchUser(){
            //den som är inloggad
            this.saveEmail()
            var userLogedIn = this.$root.useremail

            //den mail som står på varje meddelande
            var userdiv = document.getElementsByClassName('user');

            for(var i = 0; i < userdiv.length; i++){
                var userdivAttr = userdiv[i].getAttribute('data-user');
                if (userLogedIn == userdivAttr) {
                    userdiv[i].firstChild.style.float="right";
                    userdiv[i].firstChild.style.background="#D9E3F1";
                }
                else if(userLogedIn !== userdivAttr){
                    userdiv[i].firstChild.style.float="left";
                }
            }
        },
        messageListener () {    
            this.room.child('messages').on('child_added', (snapshot) => {
                // push the snapshot value into a data attribute
                this.messages.push(snapshot.val())
            })
            this.emailMatchUser()//i want this function to trigger when the code above has finished, and when its rendered to html

        },
        logout(){
            firebase.auth().signOut().then(() => {
                this.$root.email = '';
                this.$router.replace('login');
            })
        },  
    }
}

import*作为firebase从“firebase”导入
导出默认值{
姓名：'聊天'，
数据：函数（）{
返回{
房间：空，
db:null，//稍后分配Firebase SDK
messageInput:“”，//这是针对v型的
信息：[]，
}
},
挂载：函数（）{
//初始化Firebase引用
this.db=firebase
this.init（）
},
方法：{
init（）{
this.room=this.db.database（）
this.messageListener（）
},
saveEmail（）{
firebase.auth（）.onAuthStateChanged（（用户）=>{
这是。$root.useremail=user.email；
})
},
发送（消息输入）{
这是saveEmail（）
//var email=此。$root.useremail；
//数据输入。
让数据={
message:messageInput，
用户：此。$root.useremail
};
//获取新邮件的密钥。
让key=this.room.push（）.key；
this.room.child（'messages/'+key）.set（数据）
//清除消息
this.messageInput=“”
},
emailMatchUser（）{
//登索姆阿尔因洛加德酒店
这是saveEmail（）
var userLogedIn=this.$root.useremail
//圣帕瓦耶梅德兰德酒店
var userdiv=document.getElementsByClassName（'user'）；
for（var i=0；i{
//将快照值推送到数据属性中
this.messages.push（snapshot.val（））
})
this.emailMatchUser（）//我希望在上面的代码完成时，以及在将其呈现为html时触发此函数
},
注销（）{
firebase.auth（）.signOut（）。然后（（）=>{
此。$root.email=''；
此.$router.replace（'login'）；
})
},  
}
}

这是我的模板

<div class="textwall" id="scrollBottom">
        <!-- ska kanske ha data-user-attribute på denna div istället? -->
        <div class="user" v-for="data in messages" :data-user="data.user">
            <div class="user-innerdiv">
                <span>{{data.user}}</span>
                <p class="message">{{data.message}}</p> 
            </div>
        </div>
</div>

{{data.user}
{{data.message}}

是的，继续，有什么问题吗？只需在mounted中调用函数，这将增加样式

在已安装的挂钩中，您将可以完全访问反应器 组件、模板和呈现的DOM（通过.this.$el）。安装的是 最常用的生命周期挂钩。最常用的模式是 获取组件的数据（改为使用为此创建的数据），以及 修改DOM，通常是为了集成非Vue库

这就是我所希望的

...
        mounted: function() {
            //initilize a Firebase reference
                this.db = firebase
                this.init()
                this.addStyle()//your function which will add style
        },
        methods:{ 
                function addStyle(){
                     //your code
                  } 
                }

...