v-for 循环 index的传值问题

Question

<el-col>
  <el-menu default-active="1">
    <el-submenu :index="index" v-for="(item,index) in menuList">
      <tempalte slot="title">{{item.subListName}}</tempalte>
      <el-menu-item-group v-if="item.subMenuList">
        <el-menu-item :index="subindex" v-for="(subItem,subindex) in item.subMenuList">{{index}}-{{subItem.subMenuName}}</el-menu-item>
      </el-menu-item-group>
    </el-submenu>
  </el-menu>
</el-col>

此时index获取为Number类型 ,说是类型不匹配。

但是我如果通过 filter过滤器去写一个转换成string类型。也会报错报错未undefind。所以请问有什么办法

    
export default{
data () {
  return {
    menuList: []
  };
},
filters: {
  toStr (value) {
    value = value.toString();
  }
},
created () {
  //略

};

Answer 1

<el-menu-item :index="subindex" v-for="(subItem,subindex) in item.subMenuList">{{index}}-{{subItem.subMenuName}}</el-menu-item>

=>

<el-menu-item :index="''+subindex" v-for="(subItem,subindex) in item.subMenuList">{{index}}-{{subItem.subMenuName}}</el-menu-item>

Answer 2

toStr (value) {
    return value.toString();
  }

Answer 3

可以在子组件里设置

props: {
  index:  Number
}

Answer 4

props: {
  index:  Number | String 
}

这样可以接受类型为Number的 index
或者

 <el-menu-item :index="subindex.toString()" v-for="(subItem,subindex) in item.subMenuList">{{index}}-{{subItem.subMenuName}}</el-menu-item>

或者

filters: {
  toStr (value) {
    if (value){
        return value.toString()
    }else{
        // undefined时候的操作
    }
  }
},

Answer 5

''+ index 即可，外面用双引号包起来。

Answer 6

`${index} `
字符串模版了解一下