在vue中如何解決v-for使用報紅並出現警告的問題（詳細教學）

下面我就為大家分享一篇基於vue中解決v-for使用報紅並出現警告的問題，具有很好的參考價值，希望對大家有所幫助。

程式碼回報對於追求優美程式碼的強迫症患者來說看著很不舒服，報紅如下：

控制台中也會有：

(Emitted value instead of an instance of Error) <Option v-for="item in searchTypeList">: component lists rendered with v-for should have explicit keys. See https://vuejs.org/guide/list.html#key for more info.

#這樣的提示，解決這個報紅的問題，我們要根據他的提示，循環的時候加入一個唯一的key，這裡選擇使用index：

<ul 
class="clearfix course-list">
<li 
class="left" 
v-for="(item,index)
in gradeClassfy.primary.grade"
:key="index"><a
href="#" rel="external nofollow" >{{item.name}}</a></li>
</ul>

#如此，報紅消失。

上面是我整理給大家的，希望今後會對大家有幫助。

相關文章：

基於vue-video-player自訂播放器的方法

Vue封裝一個簡單輕量的上傳檔案元件的範例

基於JavaScript實作幸運抽獎頁面

##

以上是在vue中如何解決v-for使用報紅並出現警告的問題（詳細教學）的詳細內容。更多資訊請關注PHP中文網其他相關文章！