In my NativeScript app, there is a BottomNavigation tab:
const routes: Routes = [
{
path: 'tabs',
component: TabsComponent,
children: [
{
path: 'feed',
loadChildren: '~/app/pages/feed/feed.module#FeedModule',
component: NSEmptyOutletComponent,
outlet: 'feedTab'
},
{
path: 'notification',
loadChildren: '~/app/pages/notification/notification.module#NotificationModule',
component: NSEmptyOutletComponent,
outlet: 'notificationTab'
},
{
path: 'create',
loadChildren: '~/app/pages/create/create.module#CreateModule',
component: NSEmptyOutletComponent,
outlet: 'createTab'
},
{
path: 'profile',
loadChildren: '~/app/pages/profile/profile.module#ProfileModule',
component: NSEmptyOutletComponent,
outlet: 'profileTab'
}
]
}
];
and within one of those child tabs, there is a RadListView of items:
<ActionBar id="profile-action-bar" title="Notifications"></ActionBar>
<GridLayout>
<RadListView separatorColor="transparent" class="notification-list" [items]="notificationList"
(loadMoreDataRequested)="onLoadMoreItemsRequested($event)" loadOnDemandMode="Auto"
(itemTap)="onNotificationTap($event)">
<!-- (itemTap)="onGoalTap($event)" -->
<ng-template let-item="item" let-i="index">
<ns-notification-item [item]=item [position]=i></ns-notification-item>
</ng-template>
</RadListView>
</GridLayout>
The list populates as expected when navigating to that tab, but if you navigate to a child component of another tab and then directly back to the BottomNavigation:
child-component:
this.router.navigate([
'../tabs'
]);
all of the items in the ListView that previously loaded have disappeared...items that had not loaded previously will then begin to populate the list however
There is a major difference Router Outlet and Page Router Outlet. On web, when you navigate all components on current route is destroyed and new component for the navigated route is rendered.
With mobile apps, you retain your navigation stack, go back to previous page right where you left. For this purpose you use Page Router Outlet, and to handle Page Router Outlet you need RouterExtensions
When you want to go back to previous page in history, you should call back() method on RouterExtensions.
Updated Playground
Related
Basically I have this route config:
{
path: '/settings',
name: 'settings',
component: AppLayoutComponent,
children: [
{ path: 'profile', component: ProfileComponent },
{ path: 'profile2', component: ProfileComponent },
]
},
When I navigate to: https://locahost:8000/settings styles are loaded correctly. Please see:
but when I navigate to: https://locahost:8000/settings/profile page styles are not loaded. Please see:
This is so weird. Did I miss something? I am using vue-router.
It's hard to tell from what you've shared but you should check if the styles on your parent route are having scope attribute in styles tag. Ex.
<style scoped></style>
My component where I want to route to Laravel Notice the question in the href in the script: The idea is actually to return me from the Vue component to a Laravel view. I have realized that vue router allows me to go perfectly from one vue component to another vue component and what I need is to go from a link in a vue component to a laravel view that belongs to a web route
<template>
<div>
<v-breadcrumbs
:items="items"
divider="."
></v-breadcrumbs>
</div>
</template>
<script>
export default {
data: () => ({
items: [
{
text: 'Dashboard',
disabled: false,
href: 'how do i add a laravel web route here?',
},
{
text: 'Link 1',
disabled: false,
href: 'breadcrumbs_link_1',
},
{
text: 'Link 2',
disabled: true,
href: 'breadcrumbs_link_2',
},
],
}),
}
</script>
I have a v-navigation-drawer which can be opened by clicking a button in a sub component.
So I changed v-model="drawer" to simply value="drawer" otherwise I get a warning about mutating a prop which makes sense (feels like doing some dirty angular double-way data binding ^^).
Here's the code:
layouts/default.vue:
<template>
<Header :toggleLeftMenu="toggleLeftMenu" />
<LeftMenu :show="showLeftMenu" :toggleLeftMenu="toggleLeftMenu" />
</template>
<script>
export default {
data() {
return {
showLeftMenu: true,
}
},
methods: {
toggleLeftMenu() {
this.showLeftMenu = !this.showLeftMenu;
},
}
}
</script>
components/layout/LeftMenu.vue:
<v-navigation-drawer
:value="show"
width="300"
clipped
fixed
app
>
This issue is that the drawer can be closed by clicking on the backdrop (on small devices). I need to plug the backdrop click to toggleLeftMenu prop, but according to the doc, this doesn't seem to be possible.
How can I achieve full control on the component? Is this #backdropClick event missing or something?
I tried to use #input but it creates an infinite loop which also makes sense.
Thanks
Using vuetify 2.6.1.
I changed v-model="drawer" to simply value="drawer" otherwise I get a warning about mutating a prop
This is not quite the right decision. Of course you should not use drawer as model, but you can create an internalDrawer prop in LeftMenu component, and leave the v-model where it is.
One of the possible ways to resolve your issue is to emit events from both sub-components into its parent.
So let's rewrite your LeftMenu component this way:
<template>
<v-navigation-drawer v-model="internalShow" width="200" clipped fixed app>
some drawer data
</v-navigation-drawer>
</template>
<script>
export default {
props: {
show: Boolean,
},
data() {
return {
internalShow: this.show,
};
},
watch: {
show (val) {
this.internalShow = val;
},
internalShow (val) {
if (val !== this.show) {
this.$emit("change-drawer-state");
}
},
},
};
</script>
In this case, every time when the internalShow state changes, an change-drawer-state event will be emitted.
Your Header component can be rewrited the same way:
<template>
<v-btn #click="$emit('change-drawer-state')">Drawer button</v-btn>
</template>
And this is the code of your parent component:
<template>
<div>
<Header #change-drawer-state="toggleLeftMenu" />
<LeftMenu :show="showLeftMenu" #change-drawer-state="toggleLeftMenu" />
</div>
</template>
<script>
import LeftMenu from "./LeftMenu";
import Header from "./Header";
export default {
components: {
LeftMenu,
Header,
},
data() {
return {
showLeftMenu: false,
};
},
methods: {
toggleLeftMenu() {
this.showLeftMenu = !this.showLeftMenu;
},
},
};
</script>
Both change-drawer-state event handlers are calling the same method - toggleLeftMenu and then the method changes show prop of navigation-drawer.
You can test this solution in a CodeSandbox playground.
I use NuxtJs and Vuetify for one project. I need to create a treeview so I would like to do it with v-treeview.
I have a problem with the node name.
Here are my data:
items: [
{
id: 1,
data: {
name: 'Application :',
id: '1',
},
children: [
{},
],
},
}
Here the frontend
<v-treeview :items="items"></v-treeview>
So I would like to have data.name in text but I can't get it. Do you have an idea?
Thanks
Add the item-text property to your v-treeview tag to specify what the value to be displayed is
:item-text="data.name"
you can use the label slot inside your v-treeview like :
<v-treeview :items="items">
<template v-slot:label="{item}">
<div class="v-treeview-node__label">{{item.data.name}}</div>
</template>
</v-treeview>
I have the following button within a Panel within a view:
items: [
{
xtype: 'button',
text: 'SEND',
ui: 'confirm',
docked: 'bottom',
handler: function(){
view.push('TouchNuts.view.Transactions',{
title: 'New views title',
html: 'Some content'
});
}
}
]
I would like to navigate to a page that consists of a list 'TouchNuts.view.Transactions' when I click it. Any ideas?
view needs to be a reference to your NavigationView. One way of getting that reference is by giving it an id and then using Ext.getCmp to fetch the component:
{
xtype: 'navigationview',
id: 'my-id',
items: [...]
}
Ext.getCmp('my-id');