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>
Related
I'm trying to get v-carousel to show an array of local images.
In my code, you can see I've tried several ways to access the images locally. Nothing shows.
I noticed in the devtools, that the files were coming through as text/html, yet they are saved in my local as PNGs. From what I can tell on my own research, there is some setting some where that needs to be changed??
Any ideas as to why this is the case?
<template>
<div>
<v-carousel>
<v-carousel-item
v-for="(photo, i) in photos"
:key="i"
:src="photo.src"
></v-carousel-item>
</v-carousel>
</div>
</template>
<script>
export default {
name: 'RotatingPhotos.vue',
data() {
return {
photos: [
{
src: '../src/assets/latte.png',
},
{
src: './src/assets/icedtea.png',
},
{
src: '#/src/assets/mocha.png',
},
{
src: 'src/assets/brunch.png',
},
],
};
},
};
</script>
the code where using src attribute in the vuetify.js is there: https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/components/VImg/VImg.ts#L110
so, it use background-image: url() in css, the path based on css file.
then please refer to background-image URL not loading using Webpack
I discovered that the text/html designation was not the issue.
I had to use the require method.
photos: [
// Images wouldn't render unless I use the require method
{
src: require('#/assets/latte.png'),
},
{
src: require('#/assets/icedtea.png'),
},
{
src: require('#/assets/mocha.png'),
},
{
src: require('#/assets/brunch.png'),
},
],
};
},
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 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>
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
I build a angular2 webpack app.
put a image in the 'src/assets/images/default.png'
and in webpack.common.js:
new CopyWebpackPlugin([{
from: 'src/assets',
to: 'assets'
}]),
{ test: /\.(jpg|png|gif)$/, loader: 'file' },
new AssetsPlugin({
path: helpers.root('dist'),
filename: 'webpack-assets.json',
prettyPrint: true
}),
when i include in template like this :
<img [src]="path" width="160" height="200" />
this.path='assets/images/default.png';
the image not loaded .
This worked for me using file-loader (npm install file-loader --save-dev) ...
in webpack.common.js
module: {
loaders: [
...
{
test: /\.(png|jpg|gif|svg|woff|woff2|ttf|eot|ico)$/,
loaders: ['file-loader?name=assets/[name].[hash].[ext]']
},
...
]
}
This still does not make background in "style=" attributes work however, which is probably a good thing for best practice.