Element: 导航组件中el-menu-item标签动态生成的index后台报Missing prop错误

[linyif2]

我的用法：
<el-menu-item :index="'topmenu-' + menuItem.id" v-for="menuItem in menulist" >{{ menuItem.menuName }}</el-menu-item>
后台报错：
vue.common.js?e881:509 [Vue warn]: Missing required prop: "index"
(found in component )

我看过源码index要求是String，之前也有issue说类似情况，但是回答里说是用错了类型，显然不符合我所遇到的情况。
请帮忙指导下这个如何解决，感谢

---

这个是我在做demo练手的时候碰到的，具体怎么解决的不太记得了...
隐约记得是有参数没有正确设置引起的，当时是使用chrome的vue插件对组件属性进行检查找出来的问题。
这一点是我个人疏漏，组件本身这部分没问题，希望遇到问题的各位也能顺利解决。

[flyingzl]

貌似我也遇到了这个问题。我的解决方法是：

                <el-submenu index='basic'>
                    <span slot='title'>基础</span>
                    <el-menu-item :index='overview'>
                        <i class='anticon anticon-home mr10'></i> 概览
                    </el-menu-item>
                </el-submenu>

export default {

        name: 'Dashboard',

        data(){
            return {
                visible: __DEV__
            }
        },

        computed:{

            appId(){
                return this.$route.params.appId;
            },

            overview(){
                return `/apps/${this.appId}/overview`
            },
}

还有就是 你可以试试 :index='geneIndex(data)' 再不行就用filter :index=' item | format(data)'

[baiyaaaaa]

问题在于你的数据是异步的吧

[linyif2]

你提到的数据异步是指？不是看得很明白

[baiyaaaaa]

menuItem的数据

[linyif2]

唔我是在组件created中用get请求了一次数据设入data的menulist中的。具体如下：

created () {
    var _self = this
    this.$http.get('http://localhost:8081/test', {type: 'json'}).then((response) => {
      _self.menulist = response.body[0].children
    })
  }

请问这个的话是会产生影响么？能帮忙提供一种解决方式么？

[baiyaaaaa]

不能对异步数据进行支持，navMenu的数据实践上都不会用接口来请求

[iliuqiang]

template里面的代码如下所示：

<el-menu theme="dark" default-active="1" class="el-menu-demo" mode="horizontal">
      <el-menu-item v-for="item in items">
        <router-link :to="'/' + item.path">{{item.name}}</router-link>
      </el-menu-item>
</el-menu>

数据如下所示：

data () {
      return {
        items: [
          {name: '1', path: 'home'},
          {name: '2', path: 'teacher'},
          {name: '3', path: 'topics'},
          {name: '4', path: 'about'}
        ]
      }
}

我跟index都没发生关系啊，但还是报一样的错：
vue.common.js?e881:509 [Vue warn]: Missing required prop: "index"(found in component )。
不知道怎么回事额，求大神解答下。

[buynao]

出现同样的问题，到底是怎么回事呃。。。

[baiyaaaaa]

报错不是告诉你了么 Missing required prop: "index"(found in component )。

[zhonggedan]

此问题解决了吗？@linyif2

[linyif2]

@zhonggedan 这个是我在做demo练手的时候碰到的，具体怎么解决的不太记得了...
隐约记得是有参数没有正确设置引起的，当时是使用chrome的vue插件帮助对组件属性进行检查找出来的问题。

这一点是我个人疏漏，组件本身这部分没问题。

[liwenlong]

我也遇到这个问题，感觉是饿了么这个组件，在el-menu-item 及el-submenu 标签上面，必须要加上 index属性，如果没有则报错。
正常index可以进行页内的路由跳转。如果不想用它的路由的话，也要写上index，大不了写成index=“”，就不会报错了。

[Guanyuhao]

具体怎么解决的 我也遇到了

[Guanyuhao]

跟你一样的情况

[gitducheng]

感谢liwenlong，他的答案是正解

[hunterWYS]

比如你有三个导航的列表，在三个中加个index=“1”~“2”~“3”

[gitducheng]

抱歉，因为我一般不上新浪邮箱，一般用得多的是QQ和微信，所以没有及时看到消息，抱歉了，还有你提出的问题很好，因为这是我学习过程中做到练手项目，之后并没有继续完善下去了。总的来说，感觉你给我发邮件吧
----- 原始邮件 -----
发件人：hunterWYS [e-mail]
收件人：ElemeFE/element [e-mail]
抄送人：gitducheng [e-mail], Comment [e-mail]
主题：Re:_[ElemeFE/element]_导航组件中el-menu-item标签动态生成的index后台报Missing_prop错误_(#1685)
日期：2018年02月27日 11点48分

解决问题

全部问题

我发起的

与我相关

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub, or mute the thread.

[rechun]

这个问题我也遇到了，在我查看了vue 的devTools里的Elmenu 的submenus 数组时发现 了undefined

仔细检查了组件发现确实有 一个el-submenu 没有填写index属性。。。