My Vue app has been set up with Ionic 4 using @ionic/vue.
Below is the code snippet from 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 corresponds to 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 application is functioning as expected, however, there seems to be an issue:
Clicking on the Menu title triggers the alert correctly. But clicking on "test" inside ion-content within ion-menu does not initiate any action. I have attempted different approaches, including vanilla onclick, but the clicks within ion-content under ion-menu are not being registered.
Any suggestions on resolving this dilemma?
Thank you.