[Vuejs]-Call method when modal closes in Vue

by

1👍

✅

Use custom event on your component

<div id="app">
    <error-modal v-if="isError" v-on:retry-clicked="retry"></error-modal>
    <button @click="isError = true">Make Error</button>
</div>


const errorModal = {
    template : "<button @click=\"$emit('retry-clicked')\">Retry</button>"
}

new Vue({
    el : "#app",
    data : {
        isError : false
    },
    components : {
        errorModal
    },
    methods : {
        retry : function(){
            this.isError = false;
            console.log("child component has called parent when retry clicked")
        }
    }
})

Custom event on component – VUEJS DOC

👤Adrien Leloir

0👍

Everything you have there looks correct. You are passing the function to retry ("test") as "processFailed" – I would call that something different such as retryFn.

Then in your error modal component you just need:

<button @click="processFailed">Retry</button>

Don’t worry about what the browser shows you in F12, that is the transpiled Javascript, it will work fine.

👤LMK

Leave a comment