when Im using router-link in ionic vue, the first navigation is ok, but when I try to navigate for the second time or even when I press browser back button I get this error:
Uncaught TypeError: can't access property "classList", enteringEl is undefined
these are my components that I tried testing:
Products:
<template>
<master-layout pageTitle="Login Form">
<ion-card-header>
<ion-card-title>Product Page</ion-card-title>
</ion-card-header>
<ion-card-content>
Test<br/>
<RouterLink to="/Warehouses">Warehouses</RouterLink>
</ion-card-content>
</master-layout>
</template>
<script>
import {
IonCardHeader, IonCardTitle, IonCardContent,RouterLink
} from "#ionic/vue";
export default {
components: {
IonCardHeader, IonCardTitle, IonCardContent,RouterLink
}
};
</script>
warehouses:
<template>
<master-layout pageTitle="Login Form">
<ion-card-header>
<ion-card-title>Warehouse Page</ion-card-title>
</ion-card-header>
<ion-card-content>
Warehouse<br/>
<RouterLink to="/Products">Products</RouterLink>
</ion-card-content>
</master-layout>
</template>
<script>
import {
IonCardHeader, IonCardTitle, IonCardContent,RouterLink
} from "#ionic/vue";
export default {
components: {
IonCardHeader, IonCardTitle, IonCardContent,RouterLink
}
};
</script>
now when I start navigating from products, when I click on warehouses, its ok and I navigate to warehouses, but when I click back button or products link, I get the error I said above.
any suggestion in what is causing this problem and how should I fix it?
for those who have the same problem, this is the solution:
wrap your template in <ion-page></ion-page> so it would be:
<template>
<ion-page>
...
</ion-page>
</template>
Related
I’m developing an app and getting some of the basics down, however, when I copy the tutorial I’m using and copied the official documentation example, I can’t get router link to work at all, it does nothing. I have no idea what I’m doing wrong but it neither make a component clickable or leads anywhere. I know the pages I’ve linked to work and are reachable because I’ve gotten to them by changing the url while testing on Google Chrome. Here is my code.
First Page I’m navigating from
> <template> <base-layout page-title="Student List/MainTemp">
> <ion-list>
> <ion-item router-link="/studentList/1">Billy Click click Click click</ion-item>
> <ion-item>Michael</ion-item>
> <ion-item>Gabby</ion-item>
> <ion-item>Nick</ion-item>
> <ion-item>Virginia</ion-item>
> </ion-list>
> <ion-button router-link="/studentListTest.vue" :router-animation="myAnimation">Click Me</ion-button> </base-layout>
> </template>
>
> <script>
> import { IonButton, IonList, IonItem } from "#ionic/vue";
> export default {
> IonButton, IonList, IonItem
> };
> </script>
Pages I’m tring to navigate to:
<template>
<base-layout>
<h2>the student details</h2>
</base-layout>
</template>
<script>
export default {
}
</script>
Second Test Page
<template>
<base-layout page-title="Student List Test">
<ion-list>
<ion-item router-link="/studentList/1">Jimmyyy tick tick Click click</ion-item>
<ion-item>Michaasdfel</ion-item>
<ion-item>Gabbasdfy</ion-item>
<ion-item>Nickasdf</ion-item>
<ion-item>West Virginia</ion-item>
</ion-list>
<ion-button router-link="/" :router-animation="myAnimation">Click zzMe</ion-button>
</base-layout>
</template>
<script>
import {
IonButton,
IonList,
IonItem
} from "#ionic/vue";
export default {
IonButton,
IonList,
IonItem
};
</script>
Router index.js
import { createRouter, createWebHistory } from '#ionic/vue-router';
import studentList from '../pages/studentList.vue';
import studentListTest from '../pages/studentListTest.vue';
const routes = [
{
path: '/',
redirect: '/studentList'
},
{
path: '/studentList',
component: studentList
},
{
path: '/studentListTest',
component: studentListTest
},
{
path: '/studentList/1',
component: () => import('../pages/studentDetails.vue')
}
]
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})
export default router
And the base-layout for extra context
<template>
<ion-page>
<ion-header>
<ion-toolbar>
<ion-title> {{ pageTitle }} </ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<slot />
</ion-content>
</ion-page>
</template>
<script>
import {
IonPage,
IonHeader,
IonTitle,
IonToolbar,
IonContent,
} from "#ionic/vue";
export default {
props: {
pageTitle: String
},
IonPage,
IonHeader,
IonTitle,
IonToolbar,
IonContent,
};
</script>
Vue Router renders the current paht's component in the router-view component.
Include <router-view></router-view> where you want the content to render.
I got an answer somewhere else I'll post here.
I didn't include this in the script section.
components: {
**insert components here**
}
And that prevented it from working, so here's the script section fixed
<script>
import { IonButton, IonList, IonItem } from "#ionic/vue";
import baseLayout from "#/components/base/baseLayout.vue"; (I exported this globally but I'll include it here anyway)
export default {
components: {
baseLayout,
IonButton,
IonList,
IonItem,
},
};
I'm using ionic-vue to create a mobile app.
IonContent scrollToTop function is not working when I switch routes.
such as:
http://localhost:8100/tabs/q/s/20 -> http://localhost:8100/tabs/q/s/21
Details:
On the original page, when I click the scrollToTop button, it works fine. But if I go forward a link or backwards a link and then click the scrollToTop button, it doesn't work. However, if I go back to the original link, then the scrollToTop button works.
I don't understand why it's acting this way.
This is the code for the button (ScrollToTopButton.vue):
<template>
<div id="myBtn">
<ion-button #click="scrollToTop">
<ion-icon :icon="arrowUpCircleOutline" color="success"></ion-icon>
</ion-button>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import { IonButton, IonIcon } from '#ionic/vue'
import { arrowUpCircleOutline } from 'ionicons/icons';
export default defineComponent({
components: {
IonButton,
IonIcon,
},
setup () {
const scrollToTop = () => {
let scrollContent = document.querySelector('ion-content')!;
console.log(scrollContent)
//scrollContent.scrollToTop(500);
console.log(scrollContent.scrollToTop(600))
}
return { arrowUpCircleOutline, scrollToTop };
}
})
</script>
Here is the code for IonContent (in TabLayout.vue):
<template>
<ion-page>
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<slot name="actions-start"></slot>
<ion-back-button :default-href="pageDefaultBackLink" v-if="pageDefaultBackLink !== ''"></ion-back-button>
</ion-buttons>
<ion-title>
<div class="ion-text-wrap pageTitle">
{{title}}
</div>
</ion-title>
<ion-buttons slot="end">
<slot name="actions-end"></slot>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content :fullscreen="true" class="bindingScrollContent" :scroll-events="true">
<slot/>
</ion-content>
</ion-page>
</template>
This is the code where I use the ScrollToTop button inside of the IonContent (in Surah.vue):
<template>
<TabLayout :title="title" pageDefaultBackLink=''>
...
<template v-slot:actions-end>
<ScrollToTopButton/>
</template>
<SurahContainer :surah="cur_surah"/>
</TabLayout>
</template>
I tried many things but it's hard to debug this since the console log statements for data from the button doesn't change even on different routes.
Any idea or help would be awesome.
add the two lines as a comment to solve the problem
const ScrollToBottom = () => {
let scrollContent = document.querySelector('ion-content');
// eslint-disable-next-line #typescript-eslint/ban-ts-comment
//#ts-ignore
scrollContent.scrollToTop(400);
};
I am trying to use a child compontent in another compontent and it does not work. I have been trying to solve this problem looking for typos etc. for hours, but can't find anything.
Menu.vue
<template>
<div class='navbar-and-alert'>
<alert/>
<nav class='navbar'>
</nav>
</div>
</template>
<script>
import Alert from './Alert.vue'
export default {
name: 'Navbar',
compontents: {
Alert
},
data (){
return {
}
},
}
</script>
Alert.vue
<template>
<section class='alert-section'>
<p class='alert-section__content'>
...
</p>
<a href=''><img src='/static/assets/img/close.svg' class='alert-section__close-icon'></a>
</section>
</template>
<script>
export default {
name: 'Alert',
}
</script>
I get this alert in console:
Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.
found in
The alert component works when used inside App.vue
components has a typo:
compontents: {
Alert
},
Should be:
components: {
Alert
},
In my VueJS app I am using bootstrap-vue and want to use iframe inside a collapsable elements b-collapse. Because of some problems with iframe content and resizing (problem not related here) I found out that if I enable/disable b-embed with conditional rendering it works.
The parent component b-collapse has a data element called show which change its state if toggle is clicked. In my HelloWorld component I want that b-collapse can pass it's show value into the if check of b-embed.
My approach with this.$parent.$data.show isn't working and I am not sure if there is any better way to do so.
<template>
<div>
<b-btn v-b-toggle.logs>
<span class="when-opened">Close</span>
<span class="when-closed">Open</span>
Trace
</b-btn>
<b-collapse id="logs">
<b-embed :src="src" v-if="this.$parent.$data.show"></b-embed>
<div>Data: {{this.$parent.$data.show}}</div>
</b-collapse>
</div>
</template>
<script lang="ts">
import Vue from "vue";
import { Prop, Component, Inject } from "vue-property-decorator";
#Component
export default class HelloWorld extends Vue {
src = "http://localhost:7681/";
}
</script>
Like this:
parent.vue
<template>
<Child :show="myShow"></Child>
</template>
<script>
import Child from './child'
export default {
data () {
return {
myShow: 'StackOverflow'
}
},
components: {Child}
}
</script>
child.vue
<div>
<b-btn v-b-toggle.logs>
<span class="when-opened">Close</span>
<span class="when-closed">Open</span>
Trace
</b-btn>
<b-collapse id="logs">
<b-embed :src="src" v-if="this.$parent.$data.show"></b-embed>
<div>Data: {{this.$parent.$data.show}}</div>
</b-collapse>
</div>
<script>
export default {
props: {
show: {
type: Number,
require: true
}
}
}
</script>
Or use vuex to do this.
I am trying to make a nav that you can show/hide toggle by clicking on an button. Can anyone tell me what I am doing wrong here? I am still learning Vue so any help would be appreciated. Thanks.
Here's the code from navigation.vue:
<template>
<div>
<nav v-if="seen">
<ul>
<li>front</li>
<li>contact</li>
</ul>
</nav>
<p><button v-on:click="seen = !seen">Toggle</button></p>
</div>
</template>
<script>
export default {
data: {
seen: true
}
}
</script>
Importing the navigation in App.vue:
<template>
<main>
<app-navigation></app-navigation>
<app-front></app-front>
<app-footer></app-footer>
</main>
</template>
<script>
import Navigation from './components/navigation.vue'
import Front from './components/front.vue'
import Footer from './components/footer.vue'
export default {
components: {
'app-navigation': Navigation,
'app-front': Front,
'app-footer': Footer
},
data () {
return {
}
}
}
</script>
With components, your data property needs to be a function.
data(){
return {
seen: true
}
}