Firebase 如何在删除时刷新vuejs页面？

我有以下内容可以从firebase中删除，但是，在刷新页面之前，它不会在前端反映该项目已被删除。我如何设置它，使它也从前端删除，而不必手动点击刷新？同样的问题也适用于编辑

<template>
    <v-dialog max-width="600px" v-model="dialog">
        <template v-slot:activator="{ on }">
            <v-icon class="pr-1" v-on="on">mdi-square-edit-outline</v-icon>
        </template>
        <v-card>
            <v-card-title>
                <h2 class="font-weight-light">Edit Project <v-btn class="red darken-4 white--text" @click="onDelete(projectId)">Delete</v-btn></h2>
            </v-card-title>
            <v-card-text>
                <v-form>
                    <v-row>
                        <v-col>
                            <v-text-field label="Title" v-model="title"></v-text-field>
                        </v-col>
                        <v-col>
                            <v-text-field label="Client" v-model="client"></v-text-field>
                        </v-col>
                    </v-row>
                    <v-row>
                        <v-col cols="6">
                            <h3>Add Milestone</h3>
                            <v-text-field label="Milestone" v-model="name"></v-text-field>
                            <v-btn @click="addMilestone">Add</v-btn>
                        </v-col>
                        <v-col cols="6">
                            <h3>Milestones</h3>
                            <v-list dense="dense">
                                <v-list-item v-for="mile in milestone" :key="mile.id">
                                    <v-list-item-content>
                                       {{ mile.id }}.{{ mile.text }}
                                    </v-list-item-content>
                                </v-list-item>
                            </v-list>
                        </v-col>
                    </v-row>
                    <v-spacer></v-spacer>
                    <v-row>
                        <v-spacer></v-spacer>
                        <v-col class="6">
                            <v-btn @click="editProject(projectId)">Confirm Changes</v-btn>
                        </v-col>
                    </v-row>
                </v-form>
            </v-card-text>
        </v-card>
    </v-dialog>
</template>

<script>
    import db from '@/fb.js'
    export default {
        data(){
            return {
                milestone: [],
                name: null,
                id: 1
            }
        },
        props: {
            projectId: String,
            title: String,
            client: String
        },
        methods: {
            addMilestone() {
                this.milestone.push({
                    text: this.name,
                    id: this.id++
                });
            },
            editProject(id) {
                db.collection('project').doc(id).update({
                    title: this.title,
                    client: this.client
                }).then(() => {
                    this.dialog = false;
                });
            },
            onDelete(id) {
                db.collection('project').doc(id).delete()
            }

        }
    }
</script>

<style scoped>

</style>

---

你可以简单地添加emit事件，在created方法make on函数中，它允许系统知道何时有保存的emit，所以做一些事情

在你的app.js中添加：

window.Fire = new Vue();

在导出默认设置中，创建如下函数：

    created() {

        Fire.$on('refresh',()=>{
          make some thing ....
        });

    }

当您要发射发射时，只需执行以下操作：

Fire.$emit('refresh');

---

你可以简单地添加emit事件，在created方法make on函数中，它允许系统知道何时有保存的emit，所以做一些事情

在你的app.js中添加：

window.Fire = new Vue();

在导出默认设置中，创建如下函数：

    created() {

        Fire.$on('refresh',()=>{
          make some thing ....
        });

    }

当您要发射发射时，只需执行以下操作：

Fire.$emit('refresh');

---

您只删除数据库中的元素。您没有从UI中删除元素。您似乎在模板中同时定义了

标题

和

客户端

，作为道具，然后定义为

v-model

，使其可变。这是反模式的，如果您试图直接更改它们，则只删除db中的元素。您没有从UI中删除元素。您似乎在模板中同时定义了

标题

和

客户端

，作为道具，然后定义为

v-model

，使其可变。这是反模式的，如果你试图直接改变它们。