写element框架中el-menu 出现的问题

Question

<el-menu :default-active="agentsDefaultIndex">

        <el-menu-item class="staff-item" v-for="(s,index) in staffs" :index=index>
          <div class="staff-pic">WT</div>
          <div slot="title" class="staff-text">
            <div>{{s.name}}</div>
          </div>
        </el-menu-item>

</el-menu>

export default {

data(){
    agentsDefaultIndex:'1',
    staffs: [{name: 'staff1'},
      {name: 'staff2'},
      {name: 'staff3'},
      {name: 'staff4'},
      {name: 'staff5'},
      {name: 'staff6'},
      {name: 'staff7'},
      {name: 'staff8'},
      {name: 'staff9'},
      {name: 'staff10'}
    ],
}

}

后面报了两个错：

1. vue.runtime.esm.js?2b0e:587 [Vue warn]: Invalid prop: type check failed for prop "defaultActive". Expected String, got Number.
2. Invalid prop: type check failed for prop "index". Expected String, got Number.

found in

---> <ElMenuItem>

   <ElMenu>
     <ElMain>
       <ElContainer>
         <ElAside>
           <ElContainer>
             <AssignDemo> at src/views/assign/assign-demo.vue
               <ElMain>
                 <ElContainer>... (1 recursive calls)
                   <App> at src/pages/index.vue
                     <Root>

Answer 1

:index=index 这里改成 :index=" index + '(单引号)' "
因为你用了index,
index再循环里面默认是数字。而这个组件需要的index是一个字符串