如何解决vue组件中使用v-for出现告警问题-创新互联

这篇文章给大家分享的是有关如何解决vue组件中使用v-for出现告警问题的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

在项目中运行v-for代码段时，

 
   
    {{role.value}} 
   
 

  
    {{role.value}}
  
出现告警：component lists rendered with v-for should have explicit keys. See https://vuejs.org/guide/list.html#key for more info.

解决方法：

在代码中绑定key值，可解决，如：

 
   
    {{role.value}} 
   

PS：Vue2学习笔记:v-for指令

1.使用

  
  
  
  
    window.onload = function(){
      var vm = new Vue({
        el:'#box',
        data:{
          arr:['1','2','3'],
          json:{a:'a',b:'b'}
        }
      });
    }
  


  
    
循环数组
    

      
      {{a}}
      
    
    

    
循环出数组索引
    

      
      {{v}}==>{{k}}
　　　　　　　
    
    
循环json
    

      {{item}}
    
    
循环json的键
    

      
      {{k}}==>{{v}}