[Vuejs]-Pass @EventListener to Component via Vuejs Router

by

0👍

✅

You need to define a route to which your my-component will be instantiated. This component will contain the done and cancel callbacks, so:

var router = new VueRouter({
  routes: [
    { path: '/someRoute', component: SomeComponent }
  ]
]

SomeComponent would be something like:

<template>
    <my-component @done="doneForm" @cancel="cancelForm"></my-component>
</template>
<script>
    import MyComponent from '/some/path/components/MyComponent'

    export default {
        components: {
            myComponent: MyComponent
        },
        methods: {
            doneForm () {
                console.log('Form Done')
            },
            cancelForm () {
                console.log('Cancel Form')
            }
        }
    }
</script>

As you’ve not shown any code and how you’re calling your <my-component> but the whole point is that the <my-component> needs to be instantiated somewhere within another component that can have hold the cancelForm and doneForm methods. If you didn’t want these callbacks then you could set a route up to go straight to that component.

Another option is to make thing stateful using Vuex. You could remove the callbacks from the component and when the form is done within <my-component> set something in the state that you can react to somewhere else in your app. You could also do the same with events and raise an event to listen for and do something.

Leave a comment