Menu item is not clickable

Hi folks, I started with ionic some days ago and I think it is amazing, but now I am facing an error difficult to debug. The issue is that a menu item is not clickable and I don’t know why.

Here is my code:

Home.js

<template>
  <ion-page>
    <ion-menu side="start" menu-id="first" content-id="main">
      <ion-header>
        <ion-toolbar color="primary">
          <ion-title>Menú</ion-title>
        </ion-toolbar>
      </ion-header>
      <ion-content id="main">
        <ion-list>
          <ion-item @click="play">
            Jugar Trivia
          </ion-item>
          <ion-item>Menu Item</ion-item>
          <ion-item>Menu Item</ion-item>
          <ion-item>Menu Item</ion-item>
          <ion-item>Menu Item</ion-item>
        </ion-list>
      </ion-content>
    </ion-menu>
    ...
</template>

App.js

<template>
  <ion-app>
    <ion-router-outlet/>
  </ion-app>
</template>

<script>
import {IonApp} from '@ionic/vue';
import {IonRouterOutlet} from '@ionic/vue';
import {defineComponent} from 'vue';

export default defineComponent({
  name: 'App',
  components: {
    IonApp,
    IonRouterOutlet,
  }
});
</script>

When I click the first option with @click=“play” nothing happens, that method is working as expected. No error is being thrown, maybe I am missing something. Hope you can enlighten me!

3 posts - 2 participants

Read full topic