Question

我正在用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>

Answer 1

是的，有什么不对吗，只要在安装的内部调用函数，就会添加样式

在已安装的挂钩中，您将可以完全访问反应堆组件，模板和呈现的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
                  } 
                }

...

这就是我所希望的。

在Vue.js中收到Firebase数据后调用函数

1 个答案: