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


Posted in Javascript onNovember 11, 2017

在项目中运行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出现告警问题及v for指令介绍

总结

以上所述是小编给大家介绍的解决vue组件中使用v-for出现告警问题,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
判断iframe是否加载完成的完美方法
Jan 07 Javascript
纯js实现瀑布流布局及ajax动态新增数据
Apr 07 Javascript
jQuery配合coin-slider插件制作幻灯片效果的流程解析
May 13 Javascript
AngularJS框架的ng-app指令与自动加载实现方法分析
Jan 04 Javascript
assert()函数用法总结(推荐)
Jan 25 Javascript
React-router 4 按需加载的实现方式及原理详解
May 25 Javascript
JS实现json的序列化和反序列化功能示例
Jun 13 Javascript
JavaScript之map reduce_动力节点Java学院整理
Jun 29 Javascript
微信小程序学习之数据处理详解
Jul 05 Javascript
Vue 中使用vue2-highcharts实现曲线数据展示的方法
Mar 05 Javascript
微信小程序外卖选购页实现切换分类与数量加减功能案例
Jan 15 Javascript
重学JS之显示强制类型转换详解
Jun 30 Javascript
JS Input里添加小图标的两种方法
Nov 11 #Javascript
fetch 使用及如何接收JS传值
Nov 11 #Javascript
AngularJS使用ng-repeat遍历二维数组元素的方法详解
Nov 11 #Javascript
AngularJS遍历获取数组元素的方法示例
Nov 11 #Javascript
vue jsx 使用指南及vue.js 使用jsx语法的方法
Nov 11 #Javascript
vue父组件向子组件动态传值的两种方法
Nov 11 #Javascript
详解Vue如何支持JSX语法
Nov 10 #Javascript
You might like
php获取post中的json数据的实现方法
2011/06/08 PHP
PHP之十六个魔术方法详细介绍
2016/11/01 PHP
ThinkPHP实现的rsa非对称加密类示例
2018/05/29 PHP
Laravel框架搜索分页功能示例
2019/02/01 PHP
jQuery :nth-child前有无空格的区别分析
2011/07/11 Javascript
js 火狐下取本地路径实现思路
2013/04/02 Javascript
jQuery探测位置的提示弹窗(toolTip box)详细解析
2013/11/14 Javascript
JavaScript将Web页面内容导出到Word及Excel的方法
2015/02/13 Javascript
JavaScript中switch语句的用法详解
2015/06/03 Javascript
jquery.gridrotator实现响应式图片展示画廊效果
2015/06/23 Javascript
根据user-agent判断蜘蛛代码黑帽跳转代码(js版与php版本)
2015/09/14 Javascript
Bootstrap3.0建站教程(一)之bootstrap表单元素排版
2016/06/01 Javascript
ajax异步请求详解
2017/01/06 Javascript
JS+CSS实现下拉刷新/上拉加载插件
2017/03/31 Javascript
详解用node.js实现简单的反向代理
2017/06/26 Javascript
Javascript快速实现浏览器系统通知
2017/08/26 Javascript
jquery应用实例分享_实现手风琴特效
2018/02/01 jQuery
详解Vue项目引入CreateJS的方法(亲测可用)
2019/05/30 Javascript
nestjs中异常过滤器Exceptionfilter的具体使用
2021/02/07 Javascript
[00:10]DOTA2全国高校联赛 以DOTA2会友
2018/05/30 DOTA
Tornado Web服务器多进程启动的2个方法
2014/08/04 Python
Python中多线程thread与threading的实现方法
2014/08/18 Python
使用Python脚本将文字转换为图片的实例分享
2015/08/29 Python
浅谈flask截获所有访问及before/after_request修饰器
2018/01/18 Python
python查找指定文件夹下所有文件并按修改时间倒序排列的方法
2018/10/21 Python
Windows 下更改 jupyterlab 默认启动位置的教程详解
2020/05/18 Python
python中的错误如何查看
2020/07/08 Python
简单了解Python字典copy与赋值的区别
2020/09/16 Python
Gtech官方网站:地毯清洁器、吸尘器及园艺设备
2018/05/23 全球购物
英国领先的电视购物零售商:Ideal World
2019/03/18 全球购物
采购类个人求职的自我评价
2014/02/18 职场文书
工作推荐信范文
2014/05/10 职场文书
2014年档案管理员工作总结
2014/12/01 职场文书
邀请书格式范文
2015/02/02 职场文书
pytorch中的numel函数用法说明
2021/05/13 Python
Android 中的类文件和类加载器详情
2022/06/05 Java/Android