解决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 相关文章推荐
node.js中的http.createClient方法使用说明
Dec 15 Javascript
JavaScript设计模式之外观模式介绍
Dec 28 Javascript
jQuery使用slideUp方法实现控制元素缓慢收起
Mar 27 Javascript
js面向对象之公有、私有、静态属性和方法详解
Apr 17 Javascript
bootstrap输入框组代码分享
Jun 07 Javascript
AngularJS实现星星等级评分功能
Sep 24 Javascript
bootstrap paginator分页插件的两种使用方式实例详解
Nov 14 Javascript
layerUI下的绑定事件实例代码
Aug 17 Javascript
Puppet的一些技巧
Sep 17 Javascript
JS利用prototype给类添加方法操作详解
Jun 21 Javascript
JS实现可视化音频效果的实例代码
Jan 16 Javascript
Node.js文本文件BOM头的去除方法
Nov 22 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制作静态网站的模板框架(三)
2006/10/09 PHP
浅析关于PHP位运算的简单权限设计
2013/06/30 PHP
jquery 获取json数据实现代码
2009/04/27 Javascript
javascript仿qq界面的折叠菜单实现代码
2012/12/12 Javascript
java、javascript实现附件下载示例
2014/08/14 Javascript
原生javaScript实现图片延时加载的方法
2014/12/22 Javascript
BootStrap实现轮播图效果(收藏)
2016/12/30 Javascript
Bootstrap jquery.twbsPagination.js动态页码分页实例代码
2017/02/20 Javascript
详解VueJs异步动态加载块
2017/03/09 Javascript
JS库之ParticlesJS使用简介
2017/09/12 Javascript
vue.js语法及常用指令
2017/10/29 Javascript
详解Angular6.0使用路由步骤(共7步)
2018/06/29 Javascript
js实现鼠标拖拽缩放div实例代码
2019/03/25 Javascript
js 实现 list转换成tree的方法示例(数组到树)
2019/08/18 Javascript
layui表格 列自动适应大小失效的解决方法
2019/09/06 Javascript
[03:39]2015国际邀请赛主赛事首日精彩回顾
2015/08/05 DOTA
Python求解平方根的方法
2015/03/11 Python
Python中在for循环中嵌套使用if和else语句的技巧
2016/06/20 Python
几种实用的pythonic语法实例代码
2018/02/24 Python
Python实现加载及解析properties配置文件的方法
2018/03/29 Python
浅谈python numpy中nonzero()的用法
2018/04/02 Python
使用urllib库的urlretrieve()方法下载网络文件到本地的方法
2018/12/19 Python
Python实现的企业粉丝抽奖功能示例
2019/07/26 Python
Django使用Jinja2模板引擎的示例代码
2019/08/09 Python
python实现LRU热点缓存及原理
2019/10/29 Python
Python持续监听文件变化代码实例
2020/07/22 Python
C++和python实现阿姆斯特朗数字查找实例代码
2020/12/07 Python
英国领先的男士服装和时尚零售商:Burton
2017/01/09 全球购物
寻找迷宫的一条出路,o通路;X:障碍
2016/07/10 面试题
批评与自我批评总结
2014/10/17 职场文书
2015年度团总支工作总结
2015/04/23 职场文书
小学一年级班主任工作经验交流材料
2015/11/02 职场文书
高三化学教学反思
2016/02/22 职场文书
django学习之ajax post传参的2种格式实例
2021/05/14 Python
MySQL 1130异常,无法远程登录解决方案详解
2021/08/23 MySQL
html,css,javascript是怎样变成页面的
2023/05/07 HTML / CSS