解決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>

結果：