vue.js 是构建 web 界面的 JavaScript 库, 提供数据驱动的组件, 还有简单灵活的 API, 使得 MVVM 更简单
这篇文章主要介绍了解决 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.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>
结果:
来源: http://www.phperz.com/article/18/0219/360840.html