解决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 相关文章推荐
javascript 触发事件列表 比较不错
Sep 03 Javascript
DB.ASP 用Javascript写ASP很灵活很好用很easy
Jul 31 Javascript
js jquery数组介绍
Jul 15 Javascript
页面回到顶部的三种实现(锚标记,js)
Oct 01 Javascript
jquery.map()方法的使用详解
Jul 09 Javascript
BootStrap学习系列之Bootstrap Typeahead 组件实现百度下拉效果(续)
Jul 07 Javascript
node.js中 stream使用教程
Aug 28 Javascript
AngularJS框架中的双向数据绑定机制详解【减少需要重复的开发代码量】
Jan 19 Javascript
用户管理的设计_jquery的ajax实现二级联动效果
Jul 13 jQuery
vue实现密码显示隐藏切换功能
Feb 23 Javascript
如何理解Vue的v-model指令的使用方法
Jul 19 Javascript
15分钟上手vue3.0(小结)
May 20 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函数代码
2013/08/29 PHP
yii实现图片上传及缩略图生成的方法
2014/12/04 PHP
浅谈htmlentities 、htmlspecialchars、addslashes的使用方法
2016/12/09 PHP
PHP与SQL语句常用大全
2016/12/10 PHP
JS滚轮事件onmousewheel使用介绍
2013/11/01 Javascript
javascript简单实现图片预加载
2014/12/03 Javascript
jQuery实现仿Alipay支付宝首页全屏焦点图切换特效
2015/05/04 Javascript
jQuery实现购物车表单自动结算效果实例
2015/08/10 Javascript
jQuery实现滚动切换的tab选项卡效果代码
2015/08/26 Javascript
JavaScript各类型的关系图解
2015/10/16 Javascript
jQuery实现简单倒计时功能的方法
2016/07/04 Javascript
jquery+Jscex打造游戏力度条
2020/09/12 Javascript
AngularJS中指令的四种基本形式实例分析
2016/11/22 Javascript
bootstrap table.js动态填充单元格数据的多种方法
2019/07/18 Javascript
Python实现端口复用实例代码
2014/07/03 Python
Python实现拷贝多个文件到同一目录的方法
2016/09/19 Python
python实现批量修改文件名代码
2017/09/10 Python
Flask框架踩坑之ajax跨域请求实现
2019/02/22 Python
PyQt5 多窗口连接实例
2019/06/19 Python
django框架自定义模板标签(template tag)操作示例
2019/06/24 Python
python递归下载文件夹下所有文件
2019/08/31 Python
Python银行系统实战源码
2019/10/25 Python
Django框架中间件定义与使用方法案例分析
2019/11/28 Python
python DataFrame转dict字典过程详解
2019/12/26 Python
2分钟教你实现环形/扇形菜单(基础版)
2020/01/15 HTML / CSS
Html5原创俄罗斯方块(基于canvas)
2019/01/07 HTML / CSS
什么是唯一索引
2015/07/05 面试题
妇产科护士自我鉴定
2013/10/15 职场文书
青年教师典范事迹材料
2014/01/31 职场文书
大课间活动实施方案
2014/03/06 职场文书
安全生产承诺书
2014/03/26 职场文书
大学生个人总结范文
2015/02/15 职场文书
教师聘用意向书
2015/05/11 职场文书
朋友聚会祝酒词
2015/08/10 职场文书
MySQL表的增删改查基础教程
2021/04/07 MySQL
pytorch finetuning 自己的图片进行训练操作
2021/06/05 Python