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

2019-11-19 14:56:56

字体：大中小

来源：转载

供稿：网友

在项目中运行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>

结果：