1. 程式人生 > 實用技巧 >uniapp - v-for key報錯

uniapp - v-for key報錯

報錯如下:

VM6296:1 WXMLRT_$gwx:./pages/Home/home.wxml:block:1:21250: Now you can provide attr wx:key for a wx:for to improve performance.

錯誤程式碼:

<view v-for="tag in item.tabs" :key="'nav'+tag.id" class="display-inline-block" :data-iindex="item.index" :data-id="tag.id" @tap="setZhibo">
      <view :style="tag.status=='close' ?'display:none':''" :class="{'tag-item':true,'tag-active':tag.id ==item.zhiboName}">{{tag.name}}</view>
</view>

問題:
key值綁定了。但是非 h5 平臺 :key 不支援表示式 item.index+tag.id,詳情參考:https://uniapp.dcloud.io/use?id=key

所以,重寫key值

<view v-for="tag in item.tabs" :key="tag.id" class="display-inline-block" :data-iindex="item.index" :data-id="tag.id" @tap="setZhibo">
      <view :style="tag.status=='close' ?'display:none':''" :class="{'tag-item':true,'tag-active':tag.id ==item.zhiboName}">{{tag.name}}</view>
</view>

解決