Hello I have a problem with my first Ionic-vue aplication.
Hello I have a problem with my first Ionic-vue application.
After an “npm update”, the ionic elements gets an error when Click on it,
even if i don’t have any event on it.
<template>
<IonApp>
<IonSplitPane content-id="main-content" v-if="false">
<ion-menu content-id="main-content" type="overlay">
<ion-content>
<ion-list id="inbox-list">
<ion-list-header>User Name</ion-list-header>
<ion-note>Company Name</ion-note>
<ion-menu-toggle auto-hide="false" v-for="(p, i) in appPages" :key="i">
<ion-item @click="selectedIndex = i" router-direction="root" :router-link="p.url" lines="none" detail="false" class="hydrated" :class="{ selected: selectedIndex === i }">
<ion-icon slot="start" :ios="p.iosIcon" :md="p.mdIcon"></ion-icon>
<ion-label>{{ p.title }}</ion-label>
</ion-item>
</ion-menu-toggle>
</ion-list>
<ion-list id="labels-list">
<ion-list-header>Labels</ion-list-header>
<ion-item v-for="(label, index) in labels" lines="none" :key="index">
<ion-icon slot="start" :ios="bookmarkOutline" :md="bookmarkSharp"></ion-icon>
<ion-label>{{ label }}</ion-label>
</ion-item>
</ion-list>
</ion-content>
</ion-menu>
<ion-router-outlet id="main-content"></ion-router-outlet>
</IonSplitPane>
<div v-if="true">
<h2>HOLA</h2>
<ion-button @click="hola">Hola</ion-button>
</div>
</IonApp>
</template>
<script lang="ts">
import {
IonApp, IonContent, IonIcon, IonItem, IonLabel, IonList, IonListHeader, IonMenu, IonMenuToggle, IonNote,
IonRouterOutlet, IonSplitPane ,IonButton
} from '@ionic/vue';
import { defineComponent, ref } from 'vue';
import { useRoute } from 'vue-router';
import { link, archiveOutline, archiveSharp, bookmarkOutline, bookmarkSharp, heartOutline, heartSharp, mail, mailSharp,
paperPlaneOutline, paperPlaneSharp, trashOutline, trashSharp, warningOutline, warningSharp } from 'ionicons/icons';
export default defineComponent({
name: 'App',
components: {
IonApp,
IonContent,
IonIcon,
IonItem,
IonLabel,
IonList,
IonListHeader,
IonMenu,
IonMenuToggle,
IonNote,
IonRouterOutlet,
IonSplitPane,
IonButton
},
setup() {
const selectedIndex = ref(0);
const appPages = [
{
title: 'Leads for Today',
url: '/list/today',
iosIcon: link,
mdIcon: mailSharp
},
{
title: 'Leads for Tomorrow',
url: '/list/tomorrow',
iosIcon: link,
mdIcon: mailSharp
},
{
title: 'Pending for Disposition',
url: '/list/pending',
iosIcon: link,
mdIcon: mailSharp
},
//,
// {
// title: 'Outbox',
// url: '/appointments/Outbox',
// iosIcon: paperPlaneOutline,
// mdIcon: paperPlaneSharp
// },
// {
// title: 'Favorites',
// url: '/folder/Favorites',
// iosIcon: heartOutline,
// mdIcon: heartSharp
// },
// {
// title: 'Archived',
// url: '/folder/Archived',
// iosIcon: archiveOutline,
// mdIcon: archiveSharp
// },
// {
// title: 'Trash',
// url: '/folder/Trash',
// iosIcon: trashOutline,
// mdIcon: trashSharp
// },
// {
// title: 'Spam',
// url: '/folder/Spam',
// iosIcon: warningOutline,
// mdIcon: warningSharp
// }
];
const labels = ['Family', 'Friends', 'Notes', 'Work', 'Travel', 'Reminders'];
const path = window.location.pathname.split('folder/')[1];
if (path !== undefined) {
selectedIndex.value = appPages.findIndex(page => page.title.toLowerCase() === path.toLowerCase());
}
const route = useRoute();
return {
selectedIndex,
appPages,
labels,
archiveOutline,
archiveSharp,
bookmarkOutline,
bookmarkSharp,
heartOutline,
heartSharp,
mail,
link,
mailSharp,
paperPlaneOutline,
paperPlaneSharp,
trashOutline,
trashSharp,
warningOutline,
warningSharp,
isSelected: (url: string) => url === route.path ? 'selected' : ''
}
},
methods:{
hola(){
console.log("HOLA");
}
}
});
</script>
<style scoped>
</style>
It gets me this error
when I click on the button, It does in every Ionic Element, for this Example I use a button,
And when I remove the IonnButton import, there is no error, but the warining comes out
<template>
<IonApp>
<IonSplitPane content-id="main-content" v-if="false">
<ion-menu content-id="main-content" type="overlay">
<ion-content>
<ion-list id="inbox-list">
<ion-list-header>User Name</ion-list-header>
<ion-note>Company Name</ion-note>
<ion-menu-toggle auto-hide="false" v-for="(p, i) in appPages" :key="i">
<ion-item @click="selectedIndex = i" router-direction="root" :router-link="p.url" lines="none" detail="false" class="hydrated" :class="{ selected: selectedIndex === i }">
<ion-icon slot="start" :ios="p.iosIcon" :md="p.mdIcon"></ion-icon>
<ion-label>{{ p.title }}</ion-label>
</ion-item>
</ion-menu-toggle>
</ion-list>
<ion-list id="labels-list">
<ion-list-header>Labels</ion-list-header>
<ion-item v-for="(label, index) in labels" lines="none" :key="index">
<ion-icon slot="start" :ios="bookmarkOutline" :md="bookmarkSharp"></ion-icon>
<ion-label>{{ label }}</ion-label>
</ion-item>
</ion-list>
</ion-content>
</ion-menu>
<ion-router-outlet id="main-content"></ion-router-outlet>
</IonSplitPane>
<div v-if="true">
<h2>HOLA</h2>
<ion-button @click="hola">Hola</ion-button>
</div>
</IonApp>
</template>
<script lang="ts">
import {
IonApp, IonContent, IonIcon, IonItem, IonLabel, IonList, IonListHeader, IonMenu, IonMenuToggle, IonNote,
IonRouterOutlet, IonSplitPane ,
//IonButton //I REMOVE THIS
} from '@ionic/vue';
import { defineComponent, ref } from 'vue';
import { useRoute } from 'vue-router';
import { link, archiveOutline, archiveSharp, bookmarkOutline, bookmarkSharp, heartOutline, heartSharp, mail, mailSharp,
paperPlaneOutline, paperPlaneSharp, trashOutline, trashSharp, warningOutline, warningSharp } from 'ionicons/icons';
export default defineComponent({
name: 'App',
components: {
IonApp,
IonContent,
IonIcon,
IonItem,
IonLabel,
IonList,
IonListHeader,
IonMenu,
IonMenuToggle,
IonNote,
IonRouterOutlet,
IonSplitPane,
// IonButton //I REMOVE THIS
},
setup() {
const selectedIndex = ref(0);
const appPages = [
{
title: 'Leads for Today',
url: '/list/today',
iosIcon: link,
mdIcon: mailSharp
},
{
title: 'Leads for Tomorrow',
url: '/list/tomorrow',
iosIcon: link,
mdIcon: mailSharp
},
{
title: 'Pending for Disposition',
url: '/list/pending',
iosIcon: link,
mdIcon: mailSharp
},
//,
// {
// title: 'Outbox',
// url: '/appointments/Outbox',
// iosIcon: paperPlaneOutline,
// mdIcon: paperPlaneSharp
// },
// {
// title: 'Favorites',
// url: '/folder/Favorites',
// iosIcon: heartOutline,
// mdIcon: heartSharp
// },
// {
// title: 'Archived',
// url: '/folder/Archived',
// iosIcon: archiveOutline,
// mdIcon: archiveSharp
// },
// {
// title: 'Trash',
// url: '/folder/Trash',
// iosIcon: trashOutline,
// mdIcon: trashSharp
// },
// {
// title: 'Spam',
// url: '/folder/Spam',
// iosIcon: warningOutline,
// mdIcon: warningSharp
// }
];
const labels = ['Family', 'Friends', 'Notes', 'Work', 'Travel', 'Reminders'];
const path = window.location.pathname.split('folder/')[1];
if (path !== undefined) {
selectedIndex.value = appPages.findIndex(page => page.title.toLowerCase() === path.toLowerCase());
}
const route = useRoute();
return {
selectedIndex,
appPages,
labels,
archiveOutline,
archiveSharp,
bookmarkOutline,
bookmarkSharp,
heartOutline,
heartSharp,
mail,
link,
mailSharp,
paperPlaneOutline,
paperPlaneSharp,
trashOutline,
trashSharp,
warningOutline,
warningSharp,
isSelected: (url: string) => url === route.path ? 'selected' : ''
}
},
methods:{
hola(){
console.log("HOLA");
}
}
});
</script>
<style scoped>
</style>
It gets me
I hope you can Helpme and please tell me if you need some more information about my project to cant solve it, Thaks <3