MDBSideNavLink + Vue-Router


Topic: MDBSideNavLink + Vue-Router

Łukasz Musznik premium asked 3 years ago

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?


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 path key in your case? E.g.: <MDBSideNavLink :to="submenu.route.path">

Keep coding, Mikołaj from MDB


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Open

Specification of the issue
  • 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