Event assignment for an item in layout from a child page



  • Hello!

    I ask for advice.
    I have a Layout inside of which:

    <template>
    <q-layout view=“lHh Lpr lFf”>

    <q-header>
      <q-toolbar>
        <q-btn ref="actBtn" label="actionButton">
      </q-toolbar>
    </q-header>
    
    </q-page-container>
      <router-view />
    </q-page-container>
    

    </q-layout>

    And there is a q-page that appears when navigating a route, displayed inside a q-page-container Layout.

    <template>
    <q-page>
    Blank Page
    </q-page>
    </template>

    <script>
    export default {
    name: ‘PageBlank’,
    components: {
    },
    data(){
    return {
    }
    },
    methods: {
    onClick_actBtn(){
    console.log(‘onClick_actBtn’)
    }
    }
    }
    </script>

    How can I make sure that when you click on the ref = actBtn button (which is located on the main Layout), the onClick_actBtn method in the sub page is executed. ???



  • @9223000 looks like an edge case, would’ve been easier if it was the child emitting event up. Anyway see vue docs for handling such https://vuejs.org/v2/guide/components-edge-cases.html#Accessing-the-Root-Instance. This can also be done using vuex.


Log in to reply