Given I defined “play” as a method in the component I can use the “this” way.
This is the whole component:
<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 button @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>
<ion-header :translucent="true">
<ion-toolbar>
<ion-buttons slot="start">
<ion-menu-button></ion-menu-button>
</ion-buttons>
<ion-title>Gurú del Anime</ion-title>
</ion-toolbar>
</ion-header>
<ion-content :fullscreen="true">
<!--<ion-header collapse="condense">
<ion-toolbar>
<ion-title size="large">Blank</ion-title>
</ion-toolbar>
</ion-header>-->
<div id="container">
<strong style="display: block">Bienvenido</strong>
<br>
<ion-button color="success" @click="play">Jugar Trivia</ion-button>
<button class="button--primary">Button</button>
</div>
<!--<ion-fab vertical="bottom" horizontal="end" slot="fixed">
<ion-fab-button>
<ion-icon :icon="add"></ion-icon>
</ion-fab-button>
</ion-fab>-->
</ion-content>
</ion-page>
</template>
<script>
/* eslint-disable vue/no-unused-components */
/*eslint-disable no-unused-vars*/
import {AdOptions, AdSize, AdPosition} from 'capacitor-admob';
import {Plugins} from '@capacitor/core';
import {add} from 'ionicons/icons';
import {
IonPage, IonContent, IonHeader,
IonTitle, IonToolbar,
IonFab, IonFabButton,
IonIcon,
IonButton,
IonMenu, IonList, IonItem, menuController,
IonButtons, IonMenuButton,
} from '@ionic/vue';
import {useRouter} from 'vue-router';
import {defineComponent} from 'vue';
const {Storage, AdMob, Toast} = Plugins;
export default defineComponent({
name: 'Home',
components: {
IonPage, IonContent, IonHeader,
IonTitle, IonToolbar,
IonFab, IonFabButton,
IonIcon,
IonButton,
IonMenu, IonList, IonItem,
IonButtons, IonMenuButton,
},
setup() {
return {
router: useRouter(),
add,
}
},
async mounted() {
//AdMob.initialize('ca-app-pub-3940256099942544~3347511713');
setTimeout(async () => {
//this.showBanner();
}, 100);
await menuController.enable(true, 'first');
},
methods: {
async setItem() {
await Storage.set({
key: 'name',
value: 'Hiram'
});
},
async getItem() {
const {value} = await Storage.get({key: 'name'});
console.log('Got item: ', value);
},
showBanner() {
const options = {
adId: 'ca-app-pub-3940256099942544/6300978111',
adSize: AdSize.SMART_BANNER,
position: AdPosition.BOTTOM_CENTER,
hasTabBar: false, // make it true if you have TabBar Layout.
tabBarHeight: 56, // you can assign custom margin in pixel default is 56,
margin: '150',
};
AdMob.showBanner(options)
.then(
async (value) => {
/*console.log(value); // true
await Toast.show({
text: 'Showing Banner AD.'
});*/
},
async (error) => {
/*await Toast.show({
text: 'NOT SHOWING Banner AD.'
});
console.log("ERROR");
console.error(error); // show error*/
}
);
AdMob.addListener('onAdLoaded', async (info) => {
/*console.log(info);
await Toast.show({
text: 'ON AD LOADED EVENT'
});*/
});
},
play() {
console.log('clicked');
this.router.push('/custom');
},
/*openFirst() {
menuController.enable(true, 'first');
menuController.open('first');
},*/
},
});
</script>
