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

来源：动视网责编：小采时间：2020-11-27 22:25:43

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

解决vue组件中使用v-for出现告警问题及v for指令介绍:在项目中运行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.typ

推荐度：

点击下载本文 文档为doc格式

导读解决vue组件中使用v-for出现告警问题及v for指令介绍:在项目中运行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.typ

在项目中运行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>

结果：