Vue: how to call 3 different v-on: click functions

user_10180757 0
Viewed 214

I have a main page with 3 buttons that lead to the other 3 pages. All 4 pages (components) are connected through App.vue. I use :click="goPage('pageName') at the main page with 3 different pageNames. And method:

goPage: function (status) {
            this.$emit(status)
        }

I am trying to pass my "pageName" to App.vue

<main-page v-if="status === 'mainPage'"
  v-on:goPage="goPage($event)"

and

goPage: function(status){
  console.log(status)
  this.status = status
  }

I used $emit approach and it worked for a single page. But I have no idea how to work with multiple calls. Do $emit or should use something other?

vue.js
1 Answers

You need to pass method as prop to your main page component. on main page component, get chageStatus function from prop then for each button set an @click to change your status to desire page name. on top component you need to define a method to change status for you:

<template>
<div>
    <main-page v-if="status === 'mainPage'" :changeStatus ="this.changeStatus" />
    <other-page v-else-if="status === 'otherPage'"/>
    <another-page v-else-if="status === 'anotherPage'"/>
<div>
</template>

<script>
export default {
    data(){
        return {
            status: 'mainPage'
        }
    }
    methods: {
        changeStatus(dst) { 
            this.status = dst
        }
    }
}

</script>
user_123377830
Related