Question

我有以下内容可以从Firebase中删除，但可以正常工作，但是，直到刷新页面后，它才反映在前端。如何设置它，使其也可以从前端删除，而不必手动单击刷新？编辑也有同样的问题

/actuator/health/zookeeper

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

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

Answer 1

U可以简单地添加发射事件，并在创建的方法中使用make on函数，它使系统知道何时存在已保存的发射，因此可以做些事

在您的app.js中添加：

window.Fire = new Vue();

并在导出默认设置中使创建的功能如下：

    created() {

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

    }

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

Fire.$emit('refresh');

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

1 个答案: