How do I refresh vuejs page on delete?

Question

I have the following which works fine to delete from firebase, however, it doesn't reflect on the front end that the item was deleted until you refresh the page. How would I set it so that it also removes from the front end without having to manually hit refresh? Same question for editing too

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

I tried the following when trying to use snapshot to update but got error that docChanges is not a function

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 + ']')
                        }
                    })
                })
            }

You are deleting the element only in db. You are not removing the element from the UI. — Gowthaman, Nov 25 '19 at 17:44
You seem to have `title` and `client` defined at the same time as props and then as `v-model` in your template, making it mutable. That's anti-pattern and [Vue shoud yell at you](https://stackoverflow.com/questions/39868963/vue-2-mutating-props-vue-warn) if you try to change them directly. — Pierre_T, Nov 25 '19 at 21:00

score 0 · Answer 1 · edited Nov 25 '19 at 19:06

U can simply add emit event and in created method make on function it's allow the system know when there a saved emit so do some thing

in you app.js add:

window.Fire = new Vue();

and in export default make created function like this:

    created() {

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

    }

and when you want to fire the emit just do this:

Fire.$emit('refresh');

How do I refresh vuejs page on delete?

1 Answers1