uniapp的v-for的key不同平台的兼容解決

問題

當同一個頁面同時存在兩個或兩個以上的 v-for 遍歷的時候，在不同環境中存在以下兩種不同的warning：

代碼（兩個v-for）：

<!-- 標題+列表 開始 -->
<view v-for="(list,listindex) in workList" :key="listindex" :class="listindex>0 ? 'margin-top': ''">
    <icon-list :list="list.list" :title="list.title" :randomColor="true"></icon-list>
</view>
<!-- 標題+列表 結束 -->

<!-- 標題+列表 開始 -->
<view v-for="(list,listindex) in approveList" :key="listindex" :class="listindex>=0 ? 'margin-top': ''">
    <icon-list :list="list.list" :title="list.title" iconpre="fa " :circle="false" :randomColor="true" :autoTrigger="false" @itemClick="approveClick"></icon-list>
</view>
<!-- 標題+列表 結束 -->

H5端：

頁面正常渲染，但是控制台有以下提示：

Duplicate keys detected: '0'. This may cause an update error.

檢測到重復key：“0”。這可能會導致更新錯誤。

這是因為我用index作為key值，而index都是從0開始的，就出現了重復的key。

 

 

要解決H5端的這個報錯，可以把key值修改成:key="'list-'+index"的形式，如下：

<!-- 標題+列表 開始 -->
<view v-for="(list,listindex) in workList" :key="'workList-'+listindex" :class="listindex>0 ? 'margin-top': ''">
    <icon-list :list="list.list" :title="list.title" :randomColor="true"></icon-list>
</view>
<!-- 標題+列表 結束 -->

<!-- 標題+列表 開始 -->
<view v-for="(list,listindex) in approveList" :key="'approveList-'+listindex" :class="listindex>=0 ? 'margin-top': ''">
    <icon-list :list="list.list" :title="list.title" iconpre="fa " :circle="false" :randomColor="true" :autoTrigger="false" @itemClick="approveClick"></icon-list>
</view>
<!-- 標題+列表 結束 -->

這樣可以解決H5端的報錯。

可是這種把key改成表達式的方法，在編譯APP的時候卻會提示：

解決方案

所以，

當頁面需要同時存在兩個或兩個以上的v-for的時候，key的值就需要根據你最終應用的環境來正確設置。

如果是適應多端平台的話，以下方法可以作為參考：

1、把一些需要v-for的部分做成組件，這樣頁面上就不存在多個 v-for 了

2、使用遍歷的元素的某個字段值作為key，但是這個字段值必須是唯一的不重復的，如下：list.id或者list.title

<!-- 標題+列表 開始 -->
<view v-for="(list,listindex) in workList" :key="list.title" :class="listindex>0 ? 'margin-top': ''">
    <icon-list :list="list.list" :title="list.title" :randomColor="true"></icon-list>
</view>
<!-- 標題+列表 結束 -->

<!-- 標題+列表 開始 -->
<view v-for="(list,listindex) in approveList" :key="list.title" :class="listindex>=0 ? 'margin-top': ''">
    <icon-list :list="list.list" :title="list.title" iconpre="fa " :circle="false" :randomColor="true" :autoTrigger="false" @itemClick="approveClick"></icon-list>
</view>
<!-- 標題+列表 結束 -->