vue根据后端渲染菜单的时候报错了，怎么解决？

Question

<template>
  <div>
    <el-col :span="4" id="nav">
      <el-menu id="app-menu" router @select="handleSelect">
        <el-submenu :key="index" v-for="(item,index) in menuList" :index="item.weight.toString()">
          <template slot="title">{{item.name}}</template>
          <el-menu-item :key="index" v-for="(item,index) in item.sons" :index="item.url">{{item.name}}</el-menu-item>
        </el-submenu>

      </el-menu>
    </el-col>
    <router-view />
  </div>
</template>

<script>
  import axios from 'axios';
  import {
    request
  } from "../network/request";
  export default {
    name: "NavMenu",
    data() {
      return {
        activeIndex: this.$route.path,
        menuList: []
      };
    },
    methods: {
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      },
      newSort(x, y) {
        console.log(x);
        return y.weight - x.weight;
      }
    },
    created() {
     
      axios.post('https://scenicvalley.cn:8002/punchcard/user/get/allRegisterInformation')
        .then((res) => {
          console.log(res); //  处理成功的函数 相当于success
          this.menuList = res.data.rst;
          this.menuList.sort((x, y) => {
            return x.weight - y.weight;
          });
          console.log(this.menuList);
          this.menuList[1].weight.toString();
        })
        .catch((error) => {
          console.log(error) //  错误处理 相当于error
        })
    }
    
  };
</script>

<style>
</style>

会出现如下的报错

如果把tostring的方法去掉，比如下面这样

也会报错

有没有什么方法可以很好的根据后端动态添加菜单呢
这是后端返回的数据

Answer 1

每个el-menu-item都需要一个字符类型的index
你的数据里貌似什么都没有

Answer 2

<el-submenu :key="index" v-for="(item,index) in menuList" :index="item.weight.toString()">

把item.weight.toString()换成item.id