Call $emit after dispatch action in Vuejs

Question

I have a parent component:

<template>
    <div class="w-full">
        <div class="card-body">
            <city-edit-form :form="form" :resource="resource" @save_resource="func">
            </city-edit-form>
        </div>
    </div>
</template>

<script>
export default {
    methods: {
        func() {
            console.log("test");
        }
    }
};
</script>

And child component:

<template>
  <div>
    <form action="#" method="POST" @submit.prevent="submit" v-else>
        <button type="submit" class="btn-green">Save</button>
    </form>
  </div>
</template>

<script>
import { UPDATE_RESOURCE } from "../../../Stores/action-types";

export default {
    props: {
        form: { required: true },
        resource: { required: true }
    },
    methods: {
        submit() {
            this.$store
                .dispatch(`city/${UPDATE_RESOURCE}`, this.form)
                .then(() => this.$emit("save_resource"));
        }
    }
};
</script>

And action is:

[UPDATE_RESOURCE]({ commit, state }, form) {
    commit(SET_LOADING, true);
    return ResourceService.update(state.resource.id, form)
            .then(({ data }) => {
                commit(SET_RESOURCE, data);
            })
            .catch(errors => {
                commit(SET_ERRORS, errors.response.data);
            })
            .finally(() => commit(SET_LOADING, false));
    });
},

When I submit form, action has been dispatched, but nothing emitted.

Nothing logged in console. Where I make mistake?

update

When I check Vue toolbar's Event tab, I see this:

I think event has been emmitted, but console.log logs nothing in console! So wired!

Can you put a breakpoint in the dispatch().then() callback? — zero298
@zero298 I set debugger in then and func. but just first called. — Chalist
@Chalist, the existing code looks fine, just a fix you need to add. Just add return in front of resolve() and reject() — chans

chans chans · Accepted Answer · 2019-10-09T14:29:06

Use return keyword while resolve or reject is triggered

[UPDATE_RESOURCE]({ commit, state }, form) {
    commit(SET_LOADING, true);
    return new Promise((resolve, reject) => {
        ResourceService.update(state.resource.id, form)
            .then(({ data }) => {
                commit(SET_RESOURCE, data);
                return resolve();
            })
            .catch(errors => {
                commit(SET_ERRORS, errors.response.data);
                return reject();
            })
            .finally(() => commit(SET_LOADING, false));
    });
},

Call $emit after dispatch action in Vuejs

update

2 Answers