解决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 相关文章推荐
jQuery选择没有colspan属性的td的代码
Jul 06 Javascript
window.parent与window.openner区别介绍
Apr 12 Javascript
利用谷歌地图API获取点与点的距离的js代码
Oct 11 Javascript
js sort 二维数组排序的用法小结
Jan 24 Javascript
jquery中get,post和ajax方法的使用小结
Feb 04 Javascript
jquery如何扑捉回车键触发的事件
Apr 24 Javascript
动态加载iframe时get请求传递中文参数乱码解决方法
May 07 Javascript
ComboBox(下拉列表框)通过url加载调用远程数据的方法
Aug 06 Javascript
JavaScript闭包与作用域链实例分析
Jan 21 Javascript
微信小程序 scroll-view 水平滚动实现过程解析
Oct 12 Javascript
vue 通过 Prop 向子组件传递数据的实现方法
Oct 30 Javascript
vue实现可以快进后退的跑马灯组件
Apr 08 Vue.js
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下正则来匹配dede模板标签的代码
2010/08/21 PHP
浅谈php优化需要注意的地方
2014/11/27 PHP
php根据日期或时间戳获取星座信息和生肖等信息
2015/10/20 PHP
php redis实现对200w用户的即时推送
2017/03/04 PHP
php strftime函数的详细用法
2018/06/21 PHP
PHP implode()函数用法讲解
2019/03/08 PHP
splice slice区别
2006/10/09 Javascript
对象的类型:本地对象(1)
2006/12/29 Javascript
新浪的图片新闻效果
2007/01/13 Javascript
javascript中巧用“闭包”实现程序的暂停执行功能
2007/04/04 Javascript
Javascript图像处理—虚拟边缘介绍及使用方法
2012/12/27 Javascript
原生Js页面滚动延迟加载图片实现原理及过程
2013/06/24 Javascript
JS的get和set使用示例
2014/02/20 Javascript
javascript实现多级联动下拉菜单的方法
2015/02/06 Javascript
JavaScript 表单处理实现代码
2015/04/13 Javascript
ajax读取数据后使用jqchart显示图表的方法
2015/06/10 Javascript
Jquery AJAX POST与GET之间的区别详细介绍
2016/10/17 Javascript
vue过渡和animate.css结合使用详解
2017/06/14 Javascript
javascript 产生随机数的几种方法总结
2017/09/26 Javascript
js遍历添加栏目类添加css 再点击其它删除css【推荐】
2018/06/12 Javascript
微信小程序实现循环动画效果
2018/07/16 Javascript
javascript头像上传代码实例
2019/09/28 Javascript
webpack+express实现文件精确缓存的示例代码
2020/06/11 Javascript
[56:18]VGJ.S vs Secret 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python读取ini文件、操作mysql、发送邮件实例
2015/01/01 Python
Python做简单的字符串匹配详解
2017/03/21 Python
Python中pillow知识点学习
2018/04/30 Python
用Python实现大文本文件切割的方法
2019/01/12 Python
python pyinstaller 加载ui路径方法
2019/06/10 Python
3种python调用其他脚本的方法
2020/01/06 Python
PHP如何设置和取得Cookie值
2015/06/30 面试题
竞争上岗演讲稿范文
2014/05/12 职场文书
任命书标准格式
2015/03/02 职场文书
zabbix自定义监控nginx状态实现过程
2021/11/01 Servers
CPU不支持Windows11系统怎么办
2021/11/21 数码科技
vue实现在data里引入相对路径
2022/06/05 Vue.js