解决vue组件中使用v-for出现告警问题及v for指令介绍

时间：2021-05-18

在项目中运行v-for代码段时，

<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值，可解决，如：

<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.使用

<!DOCTYPE html><html><head> <title></title> <meta charset="utf-8"> <script src="http://unpkg.com/vue/dist/vue.js"></script> <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出现告警问题，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章