解決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>循環(huán)數組</p>
<ul>
<li v-for="a in arr">
{{a}}
</li>
</ul>
<hr>
<p>循環(huán)出數組索引</p>
<ul>
<li v-for="(v,k) in arr">
{{v}}==>{{k}}
</li>
</ul>
<p>循環(huán)json</p>
<ul>
<li v-for="item in json">{{item}}</li>
</ul>
<p>循環(huán)json的鍵</p>
<ul>
<li v-for="(k,v) in json">
{{k}}==>{{v}}
</li>
</ul>
</div>
</body>
</html>
結果：
總結
以上所述是小編給大家介紹的解決vue組件中使用v-for出現告警問題，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復大家的！
相關文章
這篇文章主要為大家詳細介紹了Vue實現圖書管理小案例，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-12-12
這篇文章主要介紹了從源碼角度來回答keep-alive組件的緩存原理，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-01-01
這篇文章給大家介紹了Vue3監(jiān)聽store中數據變化的三種方法,使用watch和storeToRefs函數,使用計算屬性computed和使用watchEffect函數這三種方法,文中通過代碼講解非常詳細,需要的朋友可以參考下2024-01-01
這篇文章主要給大家介紹了關于vue中如何使用echarts動態(tài)渲染數據的相關資料,echarts是一款基于JavaScript的開源可視化圖表庫,它通過簡單的配置即可實現各種各樣的可視化效果,需要的朋友可以參考下2023-11-11
這篇文章主要介紹了vue 國際化 vue-i18n 雙語言 語言包的相關知識，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2018-06-06
這篇文章主要介紹了解決運行vue項目內存溢出問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
keep-alive include和exclude無效問題及解決
這篇文章主要介紹了keep-alive include和exclude無效問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11
最近在做小程序開發(fā)的時候，遇到了點問題。最終選擇用mpvue來做，誰知這么多坑，下面小編把我遇到的問題分享給大家，如果大家對mpvue小程序仿qq左滑置頂刪除組件相關知識感興趣的朋友一起看看吧2018-08-08
本篇文章主要介紹了詳解vue 模版組件的三種用法，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
vue的ElementUI form表單如何給label屬性字符串中添加空白占位符
這篇文章主要介紹了vue的ElementUI form表單如何給label屬性字符串中添加空白占位符問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10