javascript - VueJS - 如何获取数据并在创建后立即传递数据并将其发送到 firebase？

Question

我正在尝试获取数据并在发送到 firebase 后立即显示该数据。但是，我只是在渲染或重新加载页面后获取已知数据。我想在发送数据后显示/显示数据，而无需重新加载页面。我尝试使用已安装和创建的生命周期 Hook 发出 get 请求，但同样，仅显示组件是否重新渲染或重新加载。

这是我的代码:

<template>
    <div class="container">
        <div class="row">
            <div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
                <h1>Http</h1>

                <div class="form-group">
                    <label for="name">Username:</label>
                    <input type="text" name="name" v-model="user.username">
                </div>

                <div class="form-group">
                    <label for="email">email:</label>
                    <input type="email" name="email" v-model="user.email">
                </div>

                <button class="btn btn-success" @click="sendData">Send data</button>
            </div>

            <div>
                <ul v-for="u in users">
                    <li>{{u.username}}</li>
                    <li>{{u.email}}</li>
                    <hr>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data(){
            return{
                user:{
                    username:'',
                    email:''
                },
                users:[]
            }
        },
        methods:{
            sendData(){
                this.$http.post('FIREBASE-LINK/data.json', this.user).then(response=>{
                    console.log(response)
                }).catch(err=>{
                    console.log(err)
                })
            }
        },
        mounted(){
            this.$http.get('FIREBASE-LINK/data.json').then(resp=>{
                this.users = resp.body
            }).catch(err=>{
                console.log(err)
            })
        }
    }
</script>

<style>
</style>

Answer 1

mounted，顾名思义，仅在组件创建期间调用(Vue.js API 文档说“在实例刚刚挂载后调用，其中 el 被新创建的 vm 替换”。 $el”)。由于您希望在将数据发送到数据库后显示数据，因此您的函数调用应该在 Firebase 代码完成后立即执行。

methods:{
    sendData(){
        this.$http.post('FIREBASE-LINK/data.json', this.user).then(response=>{
            console.log(response)
            this.getData()
        }).catch(err=>{
            console.log(err)
        })
    },
    getData: function () {
        this.$http.get('FIREBASE-LINK/data.json').then(resp=>{
            this.users = resp.body
        }).catch(err=>{
            console.log(err)
        })
    }
}