mdb-vue throw invalid prop when using :to={ name: 'rout


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:

error_img


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


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

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