解决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 相关文章推荐
JS中剪贴板兼容性、判断复制成功或失败
Mar 09 Javascript
JavaScript 克隆数组最简单的方法
Feb 12 Javascript
javascript 无提示关闭窗口脚本
Aug 17 Javascript
Javascript面向对象之四 继承
Feb 08 Javascript
IE6下opacity与JQuery的奇妙结合
Mar 01 Javascript
鼠标左键单击冲突的问题解决方法(防止冒泡)
May 14 Javascript
jQuery mobile类库使用时加载导航历史的方法简介
Dec 04 Javascript
解决vue项目nginx部署到非根目录下刷新空白的问题
Sep 27 Javascript
值得收藏的八个常用的js正则表达式
Oct 19 Javascript
微信小程序学习总结(三)条件、模板、文件引用实例分析
Jun 04 Javascript
基于javascript处理二进制图片流过程详解
Jun 08 Javascript
react使用antd表单赋值,用于修改弹框的操作
Oct 29 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
一台收音机,让一家人都笑逐颜开!
2020/08/21 无线电
PHP中使用curl入门教程
2015/07/02 PHP
Laravel框架中VerifyCsrfToken报错问题的解决
2017/08/30 PHP
php实现socket推送技术的示例
2017/12/20 PHP
PHP基于array_unique实现二维数组去重
2020/07/14 PHP
纯JavaScript实现的兼容各浏览器的添加和移除事件封装
2015/03/28 Javascript
JavaScript如何动态创建table表格
2020/08/02 Javascript
js仿搜狐视频记录片列表展示效果
2020/05/30 Javascript
ES6中Math对象的部分扩展
2017/02/20 Javascript
js原生代码实现轮播图的实例讲解
2017/07/28 Javascript
js 原生判断内容区域是否滚动到底部的实例代码
2017/11/15 Javascript
vue2 前端搜索实现示例
2018/02/26 Javascript
使用vue-router与v-if实现tab切换遇到的问题及解决方法
2018/09/07 Javascript
如何使用 vue + d3 画一棵树
2018/12/03 Javascript
wxPython窗口的继承机制实例分析
2014/09/28 Python
利用Python的Flask框架来构建一个简单的数字商品支付解决方案
2015/03/31 Python
apache部署python程序出现503错误的解决方法
2017/07/24 Python
Python使用struct处理二进制的实例详解
2017/09/11 Python
Python使用cx_Oracle调用Oracle存储过程的方法示例
2017/10/07 Python
Java实现的执行python脚本工具类示例【使用jython.jar】
2018/03/29 Python
python+numpy按行求一个二维数组的最大值方法
2019/07/09 Python
在python中将list分段并保存为array类型的方法
2019/07/15 Python
Windows系统Python直接调用C++ DLL的方法
2019/08/01 Python
Python 读取 YUV(NV12) 视频文件实例
2019/12/09 Python
flask 实现上传图片并缩放作为头像的例子
2020/01/09 Python
德国自行车商店:Tretwerk
2019/06/21 全球购物
酒店总经理欢迎词
2014/01/08 职场文书
网络工程师专家职业发展路线
2014/02/14 职场文书
护士自我鉴定总结
2014/03/24 职场文书
第二课堂活动总结
2014/05/07 职场文书
2014年个人债务授权委托书范本
2014/09/22 职场文书
大学同学聚会感言
2015/07/30 职场文书
小学班主任心得体会
2016/01/07 职场文书
解决Go gorm踩过的坑
2021/04/30 Golang
TypeScript实用技巧 Nominal Typing名义类型详解
2022/09/23 Javascript
使用python生成大量数据写入es数据库并查询操作(2)
2022/09/23 Python