在 Vue.js 中接收到 firebase 数据后调用函数答案

【问题标题】：Calling function after firebase data has been received in Vue.js在 Vue.js 中接收到 firebase 数据后调用函数
【发布时间】：2018-07-14 10:50:19
【问题描述】：

我正在使用 vue 和 firebase 制作一个聊天应用程序，并且需要在加载后调用一个函数来为接收到的数据添加样式。当所有聊天消息都呈现后，是否有一些挂钩可以从 firebase 获取以收听，或者我可以收听 DOM？我读过你可以在“已安装”中做一些事情，但我不明白。也许这仅适用于 vue，而对于 firebase 数据可能并没有那么多？

这是我的脚本：

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');
            })
        },  
    }
}

这是我的模板

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

【问题讨论】：

标签： javascript firebase firebase-realtime-database vue.js

【解决方案1】：

是的，继续，有什么问题只是在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
                  } 
                }

...

这就是我希望它有所帮助的全部内容。

【讨论】：