解决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 函数参数是传值(byVal)还是传址(byRef) 分享
Jul 02 Javascript
jQuery中filter()和find()的区别深入了解
Sep 25 Javascript
js去除输入框中所有的空格和禁止输入空格的方法
Jun 09 Javascript
在父页面得到zTree已选中的节点的方法
Feb 12 Javascript
innerHTML中标签可以换行的方法汇总
Aug 14 Javascript
详解基于 axios 的 Vue 项目 http 请求优化
Sep 04 Javascript
JS实现点击链接切换显示隐藏内容的方法
Oct 19 Javascript
详解webpack4升级指南以及从webpack3.x迁移
Jun 12 Javascript
基于VUE实现的九宫格抽奖功能
Sep 30 Javascript
Vue指令之 v-cloak、v-text、v-html实例详解
Aug 08 Javascript
React-redux实现小案例(todolist)的过程
Sep 29 Javascript
Javascript实现鼠标点击冒泡特效
Dec 24 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
2019年中国咖啡业现状与发展趋势
2021/03/04 咖啡文化
dede全站URL静态化改造[070414更正]
2007/04/17 PHP
set_include_path和get_include_path使用及注意事项
2013/02/02 PHP
使用dump函数,给php加断点测试
2013/06/25 PHP
PhpDocumentor 2安装以及生成API文档的方法
2014/05/21 PHP
PHP的PDO事务与自动提交
2019/01/24 PHP
让浏览器非阻塞加载javascript的几种方法小结
2011/04/25 Javascript
javascript实现仿腾讯游戏选择
2015/05/14 Javascript
jQuery过滤HTML标签并高亮显示关键字的方法
2015/08/07 Javascript
jQuery插件ajaxfileupload.js实现上传文件
2020/10/23 Javascript
js 声明数组和向数组中添加对象变量的简单实例
2016/07/28 Javascript
关于动态执行代码(js的Eval)实例详解
2016/08/15 Javascript
Js查找字符串中出现次数最多的字符及个数实例解析
2016/09/05 Javascript
用jQuery.ajaxSetup实现对请求和响应数据的过滤
2016/12/20 Javascript
jQuery读取XML文件的方法示例
2017/02/03 Javascript
js原生日历的实例(推荐)
2017/10/31 Javascript
JavaScript实现的鼠标跟随特效示例【2则实例】
2018/12/22 Javascript
原生js代码能实现call和bind吗
2019/07/31 Javascript
vue项目如何监听localStorage或sessionStorage的变化
2021/01/04 Vue.js
使用python Django做网页
2013/11/04 Python
对python过滤器和lambda函数的用法详解
2019/01/21 Python
使用python list 查找所有匹配元素的位置实例
2019/06/11 Python
Python 实现输入任意多个数,并计算其平均值的例子
2019/07/16 Python
python实现高斯投影正反算方式
2020/01/17 Python
Pycharm最常用的快捷键及使用技巧
2020/03/05 Python
PyTorch之nn.ReLU与F.ReLU的区别介绍
2020/06/27 Python
NBA欧洲商店(英国):NBA Europe Store UK
2018/07/27 全球购物
罗兰·穆雷官网:Roland Mouret
2018/09/28 全球购物
华为消费者德国官方网站:HUAWEI德国
2020/11/03 全球购物
final, finally, finalize的区别
2012/03/01 面试题
毕业生实习鉴定
2013/12/11 职场文书
施工资料员岗位职责
2014/01/06 职场文书
大学生关于奋斗的演讲稿
2014/01/09 职场文书
党支部书记先进事迹
2014/01/17 职场文书
公司股份转让协议书范本
2015/01/28 职场文书
深入理解redis中multi与pipeline
2021/06/02 Redis