解决vue组件中使用v-for出现告警问题及v for指令介绍

 更新时间:2017年11月11日 13:34:33   作者:1tomato   我要评论
这篇文章主要介绍了解决vue组件中使用v-for出现告警问题,在文中给大家介绍了v for指令,需要的朋友可以参考下

在项目中运行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出现告警问题,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

相关文章

  • Vue CLI3 如何支持less的方法示例

    Vue CLI3 如何支持less的方法示例

    这篇文章主要介绍了Vue CLI3 如何支持less的方法示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08
  • Vue自定义过滤器格式化数字三位加一逗号实现代码

    Vue自定义过滤器格式化数字三位加一逗号实现代码

    这篇文章主要介绍了Vue自定义过滤器格式化数字三位加一逗号的实现代码,需要的朋友可以参考下
    2018-03-03
  • 解决vue单页面修改样式无法覆盖问题

    解决vue单页面修改样式无法覆盖问题

    这篇文章主要介绍了vue单页面修改样式无法覆盖问题,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-08-08
  • Vue二次封装axios为插件使用详解

    Vue二次封装axios为插件使用详解

    这篇文章主要介绍了Vue二次封装axios为插件使用详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-05-05
  • vue中eventbus被多次触发以及踩过的坑

    vue中eventbus被多次触发以及踩过的坑

    这篇文章主要介绍了vue中eventbus被多次触发以及踩过的坑,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-12-12
  • nuxt.js 缓存实践

    nuxt.js 缓存实践

    这篇文章主要介绍了nuxt.js 缓存实践,nuxt 的缓存可以分为 组件级别缓存 , API级别缓存 以及 页面级别缓存,本文就详细的介绍了这三种缓存,感兴趣的小伙伴们可以参考一下
    2018-06-06
  • vue-lazyload使用总结(推荐)

    vue-lazyload使用总结(推荐)

    vue项目用到vue-lazyload做图片懒加载,这篇文章主要介绍了vue-lazyload使用总结,解决这个插件的坑,非常具有实用价值,需要的朋友可以参考下
    2018-11-11
  • 详解vue-router 命名路由和命名视图

    详解vue-router 命名路由和命名视图

    这篇文章主要介绍了详解vue-router 命名路由和命名视图,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-06-06
  • Vue.js 2.0窥探之Virtual DOM到底是什么?

    Vue.js 2.0窥探之Virtual DOM到底是什么?

    大家可能听说Vue.js 2.0已经发布,并且在其中新添加如了一些新功能。其中一个功能就是“Virtual DOM”。那么下面这篇文章就来给大家详细介绍Vue.js 2.0中的Virtual DOM到底是什么?需要的朋友可以参考借鉴,下面来一起看看吧。
    2017-02-02
  • 浅谈在vue项目中如何定义全局变量和全局函数

    浅谈在vue项目中如何定义全局变量和全局函数

    本篇文章主要介绍了浅谈在vue项目中如何定义全局变量和全局函数,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-10-10

最新评论