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

【问题标题】：How do I refresh vuejs page on delete?如何在删除时刷新 vuejs 页面？
【发布时间】：2020-03-20 23:38:54
【问题描述】：

我有以下内容可以很好地从 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>

我在尝试使用快照进行更新时尝试了以下操作，但出现 docChanges 不是函数的错误

onDelete(id) {
                db.collection('project').doc(id).onSnapshot(snapshot => {
                    const changes = snapshot.docChanges();
                    changes.forEach (change => {
                        if(change.type === 'removed') {
                            this.projects.querySelector('[data-id=' + change.doc.id + ']')
                        }
                    })
                })
            }

【问题讨论】：

您只删除 db 中的元素。您没有从 UI 中删除元素。
您似乎将title 和client 定义为props，然后在模板中定义为v-model，使其可变。如果您尝试直接更改它们，那是反模式和Vue shoud yell at you。

标签： firebase vue.js google-cloud-firestore

【解决方案1】：

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

在你的 app.js 中添加：

window.Fire = new Vue();

在 export default 中创建这样的函数：

    created() {

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

    }

当你想触发发射时，只需这样做：

Fire.$emit('refresh');

【讨论】：