Vue-Material导航栏,缺少必需的道具:“到”

时间:2017-12-19 10:28:00

标签: vue.js vue-material

所以Vue-Material文档(https://vuematerial.io/components/bottom-bar)说可以创建一个用md-bottom-bar-item填充的md-bottom-bar,同时可以制作md-bottom-bar-item表现得像<router-link>

他们的代码可以在“与Vue路由器的无缝集成”下面看到(这正是^^的意思),我的代码看起来像这样:

<md-bottom-bar-item
    id="messageRoute"
    to="/Messages"
    @click="stuff"
    md-label="Notifications"
    md-icon="message">
</md-bottom-bar-item>

<md-bottom-bar-item
    id="settingsRoute"
    to="/Settings"
    @click="stuff"
    md-label="Options"
    md-icon="settings">
</md-bottom-bar-item>

这些是通知列表的标签,以及我的应用的设置页面。

当我点击一个项目时我得到的错误实际上是这个(我得到它5次,因为我的导航栏中有5个项目):

[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
             <NavBar> at src\components\NavBar.vue
               <App> at src\App.vue
                 <Root>

顺便说一下,我没有@click='stuff'就得到了同样的错误,与它无关......我猜......

是关于Vue-Material@1.0.0(我正在使用的那个)是测试版还是?感觉我正在做文档中显示的内容,我甚至将其复制粘贴并更改了内容以便它适合我的应用程序。

现在我只做了一个goTo(path)方法,只做了this.$router.replace(path),但是底栏不与Vue的路由器同步,具有md-sync-route属性,如下所示:

<md-bottom-bar md-sync-route>
    <!-- stuff -->
</md-bottom-bar>

不是一个严重的问题,但该死的,为什么Vue.js,为什么??? ^^“

而且,真是个巨魔:

Yeah sure it works perfectly for me.... sure ^^'

2 个答案:

答案 0 :(得分:0)

好的,这很有意思。

正如您给我的问题所指出的,这可能是版本问题,但我的vue版本是2.9.2(使用vue -V检查)。没关系,我仍然跑npm update -g vue,我从终端得到答案......好吧:

+ vue@2.5.11
updated 1 package in 0.626s

现在一切正常(路由器,等等......)。

但为什么呢? vue-material是否使用稍微不同的vue,或者是某些部分被重新定义,例如路由器链接在md-bottom-bar-item等特定元素上的行为?

为什么npm install无法解决这个问题?嗯,无论如何,现在它的工作原理,我的最后一个问题可能是因为这个框架是一个测试版,很少有事情需要完成......或者因为我开始用npm做的东西等等^^

如果你知道某些事情会对我有所帮助,请随时告诉我,我很高兴听到......

答案 1 :(得分:0)

它也会发生在1.0.0-beta-8中,但似乎有提交修复

https://github.com/vuematerial/vue-material/commit/6860d3a004b09baef751724c0d9bf1ebdf92b752