Can someone please tell me if I can achieve this in angular2+.
<app-list-table [list]="myList">
<app-list-column name="'Name'"></app-list-column>
<app-list-column name="'Direction'"></app-list-column>
</app-list-table>
In module import router module as
RouterModule.forRoot([
{
path: 'name',
component: NameComponent
},
{
path: 'direction',
component: DirectionComponent
}
])
In list table component use selectors of sub components
Related
I have a route setup where there's a parent with child routes, like this:
{
//name: 'ProductComments',
path: 'comments',
children: [
{
name: 'ProductComments',
path: '',
component: ProductComments
},
{
name: 'EditProductComment',
path: ':commentId/edit',
component: EditProductComment
}
]
}
With the above configuration, Vue Router will render my ProductComments component if I visit /comments. However, if I comment the name out and uncomment it on the parent, it won't render the ProductComments component and will give me the warning:
The route named "ProductComments" has a child without a name and an empty path. Using that name won't render the empty path child so you probably want to move the name to the child instead. If this is intentional, add a name to the child route to remove the warning.
But why is this? The child is always a more "specific" route, so why does giving it a name magically cause it to render, whereas giving the name to the parent stops it?
I think this is one of those things that was decided by the Vue team and only they can really answer why. I was curious about it though and found this
github thread talking about the exact same thing. Doesn't seem like a satisfactory answer was ever found but the comment I specifically linked contains a workaround which is just adding a redirect:
{
path: '/user/:id',
name: 'user',
/* Explicitly tell the router to redirect to default children */
redirect: '/user/:id/',
component: User,
children: [
{
path: '',
component: UserProfile
},
{
path: 'posts',
component: UserPosts
}
]
}
Set everything in the parent; it makes more semantic sense too.
My parent/child routes function like this. I haven't had any problems with this (so far?).
{
name: 'ProductComments',
path: 'comments',
component: ProductComments
children: [
{
name: 'EditProductComment',
path: ':commentId/edit',
component: EditProductComment
}
]
}
I'm upgrading the package okta/okta-vue from version 1.3.0 to 3.1.0.
It also included installation of okta-auth-js package since version 2.0.0 of okta/okta-vue.
I followed the migration info according to the changelog and the migration guide:
https://github.com/okta/okta-vue/blob/okta-vue-3.2.0/CHANGELOG.md
https://github.com/okta/okta-vue/blob/okta-vue-3.2.0/MIGRATING.md
After following the guides, I recieve errors that seem to repeat themselves in the console such as:
[Vue warn]: Error in beforeCreate hook: "TypeError: Cannot read properties of undefined (reading '_router')"
TypeError: Cannot read properties of undefined (reading '_router')
TypeError: guard is not a function
[vue-router] uncaught error during route navigation:
The 3 first errors repeat themselves several times.
I tried looking on other topics and saw some answers speaking about "this" which might cause the problem, but it doesn't seem to be the issue in my case.
Following is the routes.js code:
import DashboardLayout from 'src/components/Dashboard/Layout/DashboardLayout.vue'
import Overview from 'src/components/Dashboard/Views/Dashboard/Overview.vue'
// import Auth from '#okta/okta-vue'
import { LoginCallback } from '#okta/okta-vue'
import {
routes_App1,
routes_App3,
routes_App4,
...,
routes_App99
} from './routesDefinition'
// Dashboard Pages
const UserProfile = () => import ('src/components/Dashboard/Views/Pages/UserProfile.vue')
const routes = [
{
path: '/implicit/callback',
name: 'Okta Callback',
component: LoginCallback
// component: Auth.handleCallback()
}, {
path: '/',
component: DashboardLayout,
redirect: '/overview',
meta: {
requiresAuth: true
},
children: [
{
base: '/',
path: 'overview',
name: 'Overview',
component: Overview
},
{
path: 'userprofile',
name: 'User Profile',
component: UserProfile
},
routes_App1,
routes_App3,
routes_App4,
...,
routes_App99
]
}, {
path: '*',
component: DashboardLayout,
redirect: '/overview',
meta: {
requiresAuth: true
}
},
]
export default routes
If for any reason it matters, my company's app is written with Vue 2 in the fronted and PHP - Laravel in the backend.
The app worked completely fine before upgrading the package.
Here are some of the related packages versions I'm using (after the upgrade):
vue#2.7.10, vue-router#3.6.4, #okta/okta-auth-js#4.9.2, #okta/okta-vue#3.1.0, webpack#5.74.0
If there's any other important files I need to attach as code please let me know and I'll add them.
Please help me if anyone knows what might be the solution for those errors.
Edit: I upgraded to Webpack 5.74 recently and it didn't change anything.
Thanks in advance, Gady.
I am trying to figure out how to open a Vuetify dialog using the Vue router.
The vue-router is a new experience for me so still learning it. But Ive been working on this all day and have not come anywhere close to solving the issue.
Issue: I need to update the v-model to true to open the dialog when a router link is clicked
I have tried using meta tags and the beforerouterupdate() method to try and update the v-model but that has not worked.
This is my current route file
const routes = [
{
path: '/',
name: 'home',
component: Home,
},
{
path: '/backup',
name: 'backup',
component: BackupDialog,
children: [
{
path: '/backup/:options',
name: 'optionsModal',
component: DbBackupOptions,
meta: {
showModal: true
}
},
]
},
]
I am not sure I have the right configuration at this point. I also tried using dynamic routing but I could not figure that out either.
Is there some one that can give me some insight on how to resolve this issue or pointers in the right direction ?
I have figured out the issue mostly to the help of a video I found on Youtube.
Vue Router Based Modal
I have a few dynamic routes like this:
path: '/group/:id',
name: 'Group',
I need to edit the group contents in a separate view, which is not a modal, and pass some data to it. The link should be something like this
... group/3/edit
Child routes seem different. Which concept should I explore to do it?
PS: I found the solution that seems too simple.
I just created a separate route:
{
name: 'EditGroup',
path: '/group/:id/edit',
component: EditGroup,
props: true
},
And pass the id as a prop from task component. Would it be a sound approach?
this should do
path: 'group/',
children: [
{
path: '',
name: 'groupView',
},
{
path: ':id?/',
name: 'groupIdView',
},
{
path: ':id?/edit',
name: 'groupIdEdit',
}
]
where your first child will be you group view
second will be the id view
and lastly the edit view
I think this will work for you.
Assuming that you use nested children route.
nested routes
https://router.vuejs.org/guide/essentials/nested-routes.html
path: 'group/',
children: [
{
path: '/group/:id/edit',
name: 'child-group',
props: true,
},
]
you may also use props and pass it to router link as params.
set props to true
https://router.vuejs.org/guide/essentials/passing-props.html
I'm using the latest vue-cli, and everything works in development.
After I build it the first page of the app is not rendering properly, the rest of the pages are working fine.
Here is how it looks on dev:
and this is how it looks on prod:
Using dev tools I see the elements are not rendered properly, so I can still see the actual component (like <aq-filters>) instead of just a div:
As I mentioned, it only happens for this one page, the rest works fine.
There is no error during the build, or in the console.
Here is some of the code that might be relevant:
import { createNamespacedHelpers } from "vuex";
import DomainModal from "./AddDomainModal";
import {
PageHeader,
AqFilters,
AqEmptyPage,
AqAsync,
AqAccordionList,
AqAccordionItem,
AqGrid,
AqSelectionActions,
TenantStatusCell
} from "comp";
const { mapGetters, mapActions } = createNamespacedHelpers("domains");
...
components: {
DomainModal,
PageHeader,
AqFilters,
AqEmptyPage,
AqAsync,
AqAccordionList,
AqAccordionItem,
AqGrid,
AqSelectionActions
}
Any idea what's going on here?
UPDATE
I found a solution but I don't know why it works.
In my router.js file I used dynamic imports to create chunks, except for the first page (domains) that I imported statically:
{
path: "/domains",
name: "domains",
component: DomainsPage,
meta: { requiresAuth: true }
},
Once I changed it to dynamic import it solves the problem:
{
path: "/domains",
name: "domains",
component: () =>
import("#/views/domains/DomainsPage" /* webpackChunkName: "DomainsPage" */),
meta: { requiresAuth: true }
},
Can anyone explain it?