【问题标题】:Vue-Material navbar, Missing required prop: "to"Vue-Material 导航栏,缺少必需的道具:“to”
【发布时间】:2018-06-01 18:22:06
【问题描述】:

所以 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,为什么? ^^'

而且,真是个巨魔:

【问题讨论】:

标签: vue.js vue-material


【解决方案1】:

它也会在 1.0.0-beta-8 中发生,但似乎需要修复

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

【讨论】:

    【解决方案2】:

    好的,这很有趣。

    正如你给我的问题所指出的,这可能是版本问题,但我的 vue 版本是 2.9.2(用vue -V检查过)。没关系,我还是跑了npm update -g vue,从终端得到的答案……嗯:

    + vue@2.5.11
    updated 1 package in 0.626s
    

    现在一切正常(路由器、to 等)。

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

    为什么npm install 无法解决这个问题?好吧,无论如何,现在它可以工作了,我的最后一个问题可能是因为这个框架是一个测试版,几乎没有什么需要做的......或者因为我开始用 npm 等做一些事情^^

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

    【讨论】:

      猜你喜欢
      • 2019-11-11
      • 2019-04-23
      • 2021-10-22
      • 2018-10-21
      • 2019-09-11
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2021-08-29
      相关资源
      最近更新 更多