Topic: MDBSideNavLink + Vue-Router
Expected behavior
<MDBSideNavLink :to="submenu.route">
<i :class="submenu.icon"></i> {{ submenu.text }}
</MDBSideNavLink>
Actual behavior
<router-link :to="submenu.route">
<MDBSideNavLink>
<i :class="submenu.icon"></i> {{ submenu.text }}
</MDBSideNavLink>
</router-link>
submenu.router is vue-router object {path: '/page', name: 'page', component: () => import('./components/page')};
Both methods are working, but encapsulated version with router-link and MDBSideNavLink generates console warning and wrong highlights in the menu.
[Vue warn]: Invalid prop: type check failed for prop "to". Expected String with value "[object Object]", got Object
and <MDBSideNavLink :to="{name:submenu.route.name}"> doesnt change anything, any better solutions?
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Open
- User: Free
- Premium support: No
- Technology: MDB Vue
- MDB Version: MDB5 1.9.0
- Device: Pc
- Browser: Chrome
- OS: Win 10
- Provided sample code: No
- Provided link: No
Mikołaj Smoleński staff commented 3 years ago
Hi @Łukasz Musznik,
Your solution
<MDBSideNavLink :to="{name:submenu.route.name}">is correct. I just fixed the possible types for this prop to work also with objects without warnings. It will be available with the new release.On the other hand, can't you use
pathkey in your case? E.g.:<MDBSideNavLink :to="submenu.route.path">Keep coding, Mikołaj from MDB