[MdBottomBar] Missing required prop: "to" found in md-bottom-bar-item

[meetflyings]

<md-bottom-bar md-sync-route>
  <md-bottom-bar-item to="/hot" md-label="Home" md-icon="home"></md-bottom-bar-item>
  <md-bottom-bar-item to="/mobile" md-label="Posts" md-icon="perm_identity"></md-bottom-bar-item>
  <md-bottom-bar-item to="/formDemo" md-label="Favorites" md-icon="favorite"></md-bottom-bar-item>
</md-bottom-bar>

my vue version is 2.5.2, thanks~

[VdustR]

Could you reproduce it on Codepen?

[Samuell1]

@CocoChen917 Looks like you using older version where prop to doesnt exists.

[luooooob]

I encounter the same problem with "vue-material": "^1.0.0-beta-7"

project init by vue-cli script: vue init pwa,

// app.vue
<template>
  <div id="app">
    <router-view />
    <md-bottom-bar >
      <md-bottom-bar-item :to="'/home'" md-label="Home" md-icon="home"></md-bottom-bar-item>
      <md-bottom-bar-item :to="'/issue'" md-label="Issue" md-icon="favorite"></md-bottom-bar-item>
    </md-bottom-bar>
  </div>
</template>

// router
export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/home',
      name: 'home',
      component: Home
    },
    {
      path: '/issue',
      name: 'issue',
      component: Issue
    }
  ]
})

I start a minimalist project with this part only, but problem is still there.
it can navigate to correct path when I click the item first time, but at the same time, it throws

 [Vue warn]: Missing required prop: "to"           vue.runtime.esm.js?ff9b:574

found in

---> <MdButton> at src/components/MdButton/MdButton.vue
       <MdBottomBarItem> at src/components/MdBottomBar/MdBottomBarItem.vue
         <MdRipple> at src/components/MdRipple/MdRipple.vue
           <MdBottomBar> at src/components/MdBottomBar/MdBottomBar.vue
             <App> at src/App.vue
               <Root>

after that, items can also active or unactive when click, but the address in browser has no change,and throw this [Vue warning] twice at every click

is this a bug? what can I do

[Samuell1]

@luob5 try removing binding put only to="/issues"

[luooooob]

@Samuell1 I've all tried, to or :to, not work either

[luooooob]

now I have to use router-link instead to

<md-bottom-bar class="bottom-bar">
    <router-link class="bottom-bar-item">
        <md-bottom-bar-item>
    </router-link>
    ...
</md-bottom-bar>

.bottom-bar {
  display: flex;
}
.bottom-bar-item {
  flex-grow: 1;
}
.md-bottom-bar-item {
  width: 100%;
}

[Samuell1]

can you check your package-lock? @luob5 because this issue looks like for version 0.8.x

[luooooob]

@Samuell1

"vue-material": {
      "version": "1.0.0-beta-7",
      "resolved": "http://registry.npm.taobao.org/vue-material/download/vue-material-1.0.0-beta-7.tgz",
      "integrity": "sha1-zXu8kZ1LQ7cdkfr8m17a1Wvaoyc=",
      "requires": {
        "date-fns": "1.29.0",
        "deepmerge": "2.0.1",
        "fuzzysearch": "1.0.3",
        "is-promise": "2.1.0",
        "popper.js": "1.12.9",
        "raf": "3.4.0",
        "vue": "2.5.13",
        "vue-ga": "1.0.0"
      }
    },

it's difficult for me to connect official npm (Great Firewall).
so we have to install dependences by Taobao mirror

npm install --registry=https://registry.npm.taobao.org

I'll try again CDN mode tomorrow, thanks

[luooooob]

official registry.npmjs.org not work either, the same problem
@Samuell1

"vue-material": {
      "version": "1.0.0-beta-7",
      "resolved": "https://registry.npmjs.org/vue-material/-/vue-material-1.0.0-beta-7.tgz",
      "integrity": "sha512-wfhGBLdcmYUcTTFJADdKZld5z8g/8E/AlDo0CVby+RAMY2MaTQ5JKeJ/gJ+N0ZqTsrdooZVNPcYFJoiLanwcoA==",
      "requires": {
        "date-fns": "1.29.0",
        "deepmerge": "2.0.1",
        "fuzzysearch": "1.0.3",
        "is-promise": "2.1.0",
        "popper.js": "1.12.9",
        "raf": "3.4.0",
        "vue": "2.5.13",
        "vue-ga": "1.0.0"
      }
    },

[PNKBizz]

+1
Same problem =(

[wpots]

same problem here. vue version 2.5.13, vue-material version 1.0.0-beta-7 and vue dev tools showing the to prop is set.

"vue-material": { "version": "1.0.0-beta-7", "resolved": "https://registry.npmjs.org/vue-material/-/vue-material-1.0.0-beta-7.tgz", "integrity": "sha512-wfhGBLdcmYUcTTFJADdKZld5z8g/8E/AlDo0CVby+RAMY2MaTQ5JKeJ/gJ+N0ZqTsrdooZVNPcYFJoiLanwcoA==", "requires": { "date-fns": "1.29.0", "deepmerge": "2.0.1", "fuzzysearch": "1.0.3", "is-promise": "2.1.0", "popper.js": "1.12.9", "raf": "3.4.0", "vue": "2.5.13", "vue-ga": "1.0.0" } },

[mahapo]

@Samuell1 +1 Bug is not fixed. Still present in 1.0.0-beta-8.

[Samuell1]

@mahapo i cant reproduce it in our dev branch

[mahapo]

I tried
"dependencies": { "nuxt": "latest", "vue-material": "1.0.0-beta-8" },
and
"dependencies": { "nuxt": "latest", "vue-material": "https://github.com/vuematerial/vue-material#dev" },

[thecrazything]

I get the same issue, created vue project using vue-cli vue init pwa

[Vue warn]: Missing required prop: "to"

found in

---> <MdButton> at src/components/MdButton/MdButton.vue
       <MdBottomBarItem> at src/components/MdBottomBar/MdBottomBarItem.vue
         <MdRipple> at src/components/MdRipple/MdRipple.vue
           <MdBottomBar> at src/components/MdBottomBar/MdBottomBar.vue
             <App> at src\App.vue
               <Root>

vue-material": "^1.0.0-beta-8", "vue": "^2.5.16",

<md-bottom-bar>
          <md-bottom-bar-item to="/" md-label="Home" md-icon="home"></md-bottom-bar-item>
          <md-bottom-bar-item to="/schedule" md-label="Schedule" md-icon="favorite"></md-bottom-bar-item>
          <md-bottom-bar-item to="/animations" md-label="Animations" md-icon="favorite"></md-bottom-bar-item>
</md-bottom-bar>

[Samuell1]

@mahapo using version from dev branch doesnt change anything because we doesnt recompile it everytime

[otolab]

This problem seems to have been fixed in 6860d3a

However, it is not included in 1.0.0-beta-8, so I'm happy if you can merge it.

[Samuell1]

This should be fixed in new version.

https://github.com/vuematerial/vue-material/releases/tag/v1.0.0-beta-10

[8ctopotamus]

@Samuell1 The to prop still doesn't work for me in ^1.0.0-beta-10.2.

To get around this I just did this <md-bottom-bar-item @click="$router.push('/')" md-label="Home" md-icon="home" />.