Ionic 4 with Vue js - ion-content inside ion-menu doesn't handle any click

Question

I have a standard Vue app with Ionic 4 using @ionic/vue .
This is the main.js file:

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import Ionic from '@ionic/vue'
import '@ionic/core/css/ionic.bundle.css'

Vue.use(Ionic)
Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

And this is the app-component.ts:

<template>
  <div id="app">
    <ion-app>
      <ion-menu content-id="menu-content" side="start">
        <ion-header>
          <ion-toolbar>
            <ion-title> <p v-on:click="test">Menu</p> </ion-title>
          </ion-toolbar>
        </ion-header>
        <ion-content padding id="menu-content">
          <p v-on:click="test"> test </p>
        </ion-content>
      </ion-menu>
      <ion-vue-router />
    </ion-app>
  </div>
</template>

<script>

export default {
  name: 'app',
  methods: {
    test () {
      alert('test')
    }
  }
}
</script>

The app work perfectly except this: When i click on the Menu title the alert appear correctly. When i click on the "test" inside ion-content nothing appens. I've tried many variants, with vanilla onclick also, but ion-content inside ion-menu never handle any click. Any idea on how to solve this problem?

Thank you

Answer 1

I've found a "solution". Remove from ion-menu the "content-id" attribute and the "id" attribute from ion-content. Instead use the "main" attribute in ion-vue-router.

This is deprecated but it works...

Basically:

<template>
  <div id="app">
    <ion-app>
      <ion-menu side="start">
        <ion-header>
          <ion-toolbar>
            <ion-title> <p v-on:click="test">Menu</p> </ion-title>
          </ion-toolbar>
        </ion-header>
        <ion-content padding >
          <p v-on:click="test"> test </p>
        </ion-content>
      </ion-menu>
      <ion-vue-router main />
    </ion-app>
  </div>
</template>