在项目中运行v-for代码段时,
1 2 3 4 5 6 7 8 9 10 | <flexbox v- if = "roleShow" style= "padding:15px; box-sizing: border-box;" > <flexbox-item v- for = "role in roles " > <x-button mini :type= "role.type" style= "padding: 0 14px" @click.native= "btnClick(role.action)" >{{role.value}}</x-button> </flexbox-item> </flexbox> <flexbox v- if = "roleShow" style= "padding:15px; box-sizing: border-box;" > <flexbox-item v- for = "role in roles " > <x-button mini :type= "role.type" style= "padding: 0 14px" @click.native= "btnClick(role.action)" >{{role.value}}</x-button> </flexbox-item> </flexbox>出现告警:component lists rendered with v- for should have explicit keys. See https: //vuejs.org/guide/list.html#key for more info. |
解决方法:
在代码中绑定key值,可解决,如:
1 2 3 4 5 | <flexbox v- if = "roleShow" style= "padding:15px; box-sizing: border-box;" > <flexbox-item v- for = "(role,index) in roles " :key= "index" > <x-button mini :type= "role.type" style= "padding: 0 14px" @click.native= "btnClick(role.action)" >{{role.value}}</x-button> </flexbox-item> </flexbox> |
PS:Vue2学习笔记:v-for指令
1.使用
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | <!DOCTYPE html> <html> <head> <title></title> <meta charset= "utf-8" > <script type= "text/javascript" > window.onload = function (){ var vm = new Vue({ el: '#box' , data:{ arr:[ '1' , '2' , '3' ], json:{a: 'a' ,b: 'b' } } }); } </script> </head> <body> <div id= "box" > <p>循环数组</p> <ul> <li v- for = "a in arr" > {{a}} </li> </ul> <hr> <p>循环出数组索引</p> <ul> <li v- for = "(v,k) in arr" > {{v}}==>{{k}} </li> </ul> <p>循环json</p> <ul> <li v- for = "item in json" >{{item}}</li> </ul> <p>循环json的键</p> <ul> <li v- for = "(k,v) in json" > {{k}}==>{{v}} </li> </ul> </div> </body> </html> |
结果:
总结
以上所述是小编给大家介绍的解决vue组件中使用v-for出现告警问题,希望对大家有所帮助