解决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 屏蔽一个区域内的所有元素,禁止输入
Oct 22 Javascript
jquery实现智能感知连接外网搜索
May 21 Javascript
js实现完全自定义可带多级目录的网页鼠标右键菜单方法
Feb 28 Javascript
javascript实现的图片切割多块效果实例
May 07 Javascript
理解javascript异步编程
Jan 27 Javascript
第二章之Bootstrap 页面排版样式
Apr 25 Javascript
基于AngularJS实现iOS8自带的计算器
Sep 12 Javascript
JS实现动态修改table及合并单元格的方法示例
Feb 20 Javascript
jQuery实现页面倒计时并刷新效果
Mar 13 Javascript
JS传参及动态修改页面布局
Apr 13 Javascript
vue文件树组件使用详解
Mar 29 Javascript
js获取form表单中name属性的值
Feb 27 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中Smarty模板初体验
2011/08/08 PHP
codeigniter数据库操作函数汇总
2014/06/12 PHP
简单JS代码压缩器
2006/10/12 Javascript
在一个浏览器里呈现所有浏览器测试结果的前端测试工具的思路
2010/03/02 Javascript
JavaScript插入动态样式实现代码
2012/02/22 Javascript
js 回车提交表单两种实现方法
2012/12/31 Javascript
JS中如何设置readOnly的值
2013/12/25 Javascript
js控制容器隐藏出现防止样式变化的两种方法
2014/04/25 Javascript
jQuery判断复选框是否勾选的原理及示例
2014/05/21 Javascript
node.js中的fs.ftruncate方法使用说明
2014/12/15 Javascript
JavaScript实现算术平方根算法-代码超简单
2015/09/11 Javascript
简单学习JavaScript中的for语句循环结构
2015/11/10 Javascript
通过js修改input、select默认字体颜色
2017/04/19 Javascript
JavaScript实现瀑布流图片效果
2017/06/30 Javascript
SelectPage v2.4 发布新增纯下拉列表和关闭分页功能
2017/09/07 Javascript
基于vue展开收起动画的示例代码
2018/07/05 Javascript
layer提示框添加多个按钮选择的实例
2019/09/12 Javascript
Vue3.0数据响应式原理详解
2019/10/09 Javascript
JavaScript代码压缩工具UglifyJS和Google Closure Compiler的基本用法
2020/04/13 Javascript
python实现bitmap数据结构详解
2014/02/17 Python
详解Python发送邮件实例
2016/01/10 Python
Python中的日期时间处理详解
2016/11/17 Python
python多进程控制学习小结
2018/10/31 Python
pandas分区间,算频率的实例
2019/07/04 Python
python将字典列表导出为Excel文件的方法
2019/09/02 Python
python打印n位数“水仙花数”(实例代码)
2019/12/25 Python
python音频处理的示例详解
2020/12/23 Python
HTML5中canvas中的beginPath()和closePath()的重要性
2018/08/24 HTML / CSS
原生 JS+CSS+HTML 实现时序图的方法
2019/07/31 HTML / CSS
iHerb香港:维生素、补充剂和天然保健品
2017/08/01 全球购物
新学期校长寄语
2014/01/18 职场文书
建议书标准格式
2014/03/12 职场文书
企业新年寄语
2014/04/04 职场文书
员工安全承诺书
2014/05/22 职场文书
同学聚会通知短信
2015/04/20 职场文书
详解python的异常捕获
2022/03/03 Python