<el-menu-item :style="{color: getcolor(getSplitString2(item.Caption)) }" v-for="item in submenu" :key="item.id" :index="String(item.id)" :mydata="item"> VUe中如何取得选中时的mydata值，

源码资源网

<el-menu-item :style="{color: getcolor(getSplitString2(item.Caption)) }"  v-for="item in submenu" :key="item.id"  :index="String(item.id)" :mydata="item">  VUe中如何取得选中时的mydata值，
在Vue中获取选中菜单项的 `mydata` 值，您可以通过监听菜单的 `select` 事件来获取选中菜单项的信息。在 `select` 事件处理程序中，您可以访问选中菜单项的 `mydata` 属性。以下是一个示例代码，展示如何在Vue中获取选中菜单项的 `mydata` 值：

1. vue
   
2. <el-menu @select="handleSelect" mode="horizontal">
   
3.   <el-menu-item
   
4.     :style="{color: getcolor(getSplitString2(item.Caption)) }"
   
5.     v-for="item in submenu"
   
6.     :key="item.id"
   
7.     :index="String(item.id)"
   
8.     :mydata="item"
   
9.   >
   
10.     {{ item.Caption }}
    
11.   </el-menu-item>
    
12. </el-menu>
    
13. <script>
    
14. export default {
    
15.   data() {
    
16.     return {
    
17.       submenu: [ /* 菜单项数据 */ ],
    
18.     };
    
19.   },
    
20.   methods: {
    
21.     handleSelect(index, indexPath) {
    
22.       // 通过index获取选中菜单项的id
    
23.       const selectedItem = this.submenu.find(item => String(item.id) === index);
    
24.        // 获取选中菜单项的mydata值
    
25.       const mydataValue = selectedItem.mydata;
    
26.        // 在这里处理选中菜单项的mydata值
    
27.       console.log('选中菜单项的mydata值:', mydataValue);
    
28.     },
    
29.   },
    
30. };
    
31. </script>

复制代码

在上面的示例中， `handleSelect` 方法是 `select` 事件的处理程序。通过传入的 `index` 参数，我们可以找到选中菜单项的id，然后从 `submenu` 数组中找到对应的菜单项对象。最后，通过访问选中菜单项对象的 `mydata` 属性，您可以获取选中菜单项的 `mydata` 值。