快捷導(dǎo)航

解決vue組件中使用v-for出現(xiàn)告警問(wèn)題及v for指令介紹

更新時(shí)間：2017年11月11日 13:34:33 作者：1tomato

這篇文章主要介紹了解決vue組件中使用v-for出現(xiàn)告警問(wèn)題,在文中給大家介紹了v for指令，需要的朋友可以參考下

在項(xiàng)目中運(yùn)行v-for代碼段時(shí)，

<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>出現(xiàn)告警：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學(xué)習(xí)筆記: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)數(shù)組</p>
    <ul>
      <li v-for="a in arr">
      {{a}}
      </li>
    </ul>
    <hr>
    <p>循環(huán)出數(shù)組索引</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>

結(jié)果：

總結(jié)

以上所述是小編給大家介紹的解決vue組件中使用v-for出現(xiàn)告警問(wèn)題，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的！

您可能感興趣的文章:

相關(guān)文章

Vue實(shí)現(xiàn)圖書管理小案例
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)圖書管理小案例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-12-12
從源碼角度來(lái)回答keep-alive組件的緩存原理
這篇文章主要介紹了從源碼角度來(lái)回答keep-alive組件的緩存原理，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2021-01-01
Vue3監(jiān)聽(tīng)store中數(shù)據(jù)變化的三種方式
這篇文章給大家介紹了Vue3監(jiān)聽(tīng)store中數(shù)據(jù)變化的三種方法,使用watch和storeToRefs函數(shù),使用計(jì)算屬性computed和使用watchEffect函數(shù)這三種方法,文中通過(guò)代碼講解非常詳細(xì),需要的朋友可以參考下
2024-01-01
vue中如何使用echarts動(dòng)態(tài)渲染數(shù)據(jù)
這篇文章主要給大家介紹了關(guān)于vue中如何使用echarts動(dòng)態(tài)渲染數(shù)據(jù)的相關(guān)資料,echarts是一款基于JavaScript的開(kāi)源可視化圖表庫(kù),它通過(guò)簡(jiǎn)單的配置即可實(shí)現(xiàn)各種各樣的可視化效果,需要的朋友可以參考下
2023-11-11
vue 國(guó)際化 vue-i18n 雙語(yǔ)言語(yǔ)言包
這篇文章主要介紹了vue 國(guó)際化 vue-i18n 雙語(yǔ)言語(yǔ)言包的相關(guān)知識(shí)，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2018-06-06
解決運(yùn)行vue項(xiàng)目?jī)?nèi)存溢出問(wèn)題
這篇文章主要介紹了解決運(yùn)行vue項(xiàng)目?jī)?nèi)存溢出問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04
keep-alive include和exclude無(wú)效問(wèn)題及解決
這篇文章主要介紹了keep-alive include和exclude無(wú)效問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-11-11
mpvue小程序仿qq左滑置頂刪除組件
最近在做小程序開(kāi)發(fā)的時(shí)候，遇到了點(diǎn)問(wèn)題。最終選擇用mpvue來(lái)做，誰(shuí)知這么多坑，下面小編把我遇到的問(wèn)題分享給大家，如果大家對(duì)mpvue小程序仿qq左滑置頂刪除組件相關(guān)知識(shí)感興趣的朋友一起看看吧
2018-08-08
詳解vue 模版組件的三種用法
本篇文章主要介紹了詳解vue 模版組件的三種用法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-07-07
vue的ElementUI form表單如何給label屬性字符串中添加空白占位符
這篇文章主要介紹了vue的ElementUI form表單如何給label屬性字符串中添加空白占位符問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-10-10