Topic: mdb-vue throw invalid prop when using :to="{ name: 'routeName' }"
cryocaustik asked 6 years ago
Expected behavior
use named routes in :to
bind without errors
Actual behavior
Vue raises warning stating invalid prop type:
[Vue warn]: Invalid prop: type check failed for prop "to". Expected String with value "[object Object]", got Object
found in
---> <MdbNavbarBrand> at node_modules/mdbvue/src/components/NavbarBrand.vue
<MdbNavbar> at node_modules/mdbvue/src/components/Navbar.vue
<NavBar> at src/components/NavBar.vue
<App> at src/App.vue
<Root>
Resources (screenshots, code snippets etc.)
My Code:
<template>
<mdb-navbar class="elegant-color-dark" dark>
<mdb-navbar-brand :to="{ name: 'home' }">
Division 2
</mdb-navbar-brand>
<mdb-navbar-toggler>
<mdb-navbar-nav>
<mdb-nav-item :to="{ name: 'equipment' }">
All
</mdb-nav-item>
<mdb-nav-item :to="{ name: 'weapons' }">
Weapons
</mdb-nav-item>
</mdb-navbar-nav>
</mdb-navbar-toggler>
</mdb-navbar>
</template>
<script>
import {
mdbNavbar,
mdbNavbarBrand,
mdbNavbarToggler,
mdbNavbarNav,
mdbNavItem
} from 'mdbvue'
export default {
name: 'NavBar',
data() {
return {}
},
components: {
mdbNavbar,
mdbNavbarBrand,
mdbNavbarToggler,
mdbNavbarNav,
mdbNavItem
}
}
</script>
Error:
cryocaustik answered 6 years ago
@Magdalena Dembna by using only string values, we lose the capability to used Named Routes, which is an extremely helpful feature of the Vue Router.
Further more, by using the method of :to="{ name: 'routeName' }"
in mdb-vue, the router works as intended and will route you to the proper route, just like a router-link
would.
Magdalena Dembna staff premium answered 6 years ago
Hi, Property 'to' is expecting a string with a href to a desired location - it depends on your routes structure. Kind regards, Magdalena
Magdalena Dembna staff premium answered 6 years ago
Hi, Thank you for your suggestion, we appreciate it and, will work as quickly as possible to enable using Named Routes. Kind regards, Magdalena
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Free
- Premium support: No
- Technology: MDB Vue
- MDB Version: 5.1.1
- Device: Desktop
- Browser: Firefox, Chrome, Edge
- OS: Windows 10 Pro x64
- Provided sample code: No
- Provided link: No