for a school project I have to build a vue js app.

I used emit and :v-on to exchange data and trigger methods from child ponent and it works great!, now I want to do the same thing from a child posant, that is a vue. That means it is a a ponent displayed by the router.

here is the child ponent:

methods: {
        logout () {
            console.log("logout child")
            this.$emit('logoutUser', this.user)
        }
},

and the app.vue:

<router-view v-if="this.user.isConnected && this.user.username != ''" :userProp="user" v-on:logout="logoutUser"></router-view>


[...]


logoutUser(user) {
            console.log("logout App.vue", user)
        }

I got the log from the child: "logout child", but I can't access the method logoutUser in App.vue... the "logout App.vue" log never show...

Do you know were I did a mistake? I'm pretty much a noob

Thanks!

for a school project I have to build a vue js app.

I used emit and :v-on to exchange data and trigger methods from child ponent and it works great!, now I want to do the same thing from a child posant, that is a vue. That means it is a a ponent displayed by the router.

here is the child ponent:

methods: {
        logout () {
            console.log("logout child")
            this.$emit('logoutUser', this.user)
        }
},

and the app.vue:

<router-view v-if="this.user.isConnected && this.user.username != ''" :userProp="user" v-on:logout="logoutUser"></router-view>


[...]


logoutUser(user) {
            console.log("logout App.vue", user)
        }

I got the log from the child: "logout child", but I can't access the method logoutUser in App.vue... the "logout App.vue" log never show...

Do you know were I did a mistake? I'm pretty much a noob

Thanks!

• javascript
• vue.js
• vuejs2
• parent-child
• emit

• 1 You are listening for logout event instead of logoutUser – Vasile Radeanu Commented Nov 3, 2021 at 14:37

1 Answer 1

You have to change your v-on:logout in the router-view element to v-on:logoutUser, the v-on has to have the same value the $emit has. Also you could shorten your code a little with using @ instead of v-on: (so @logoutUser="logoutUser")