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

2020-11-27 来源：六九路网

在项目中运行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出现告警问题，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

显示全文

全部栏目

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