uniapp开发微信小程序时,报错:Now you can provide attr `wx:key` for a `wx:for` to improve performance
前言os :win10HBuilder X :2.7.14.20200618微信开发者工具 win32 :1.03.2006090问题每当使用微信开发者工具预览小程序时,均会在控制台(Console)看到警告(Warn)信息:Now you can provide attr wx:key for a wx:for to improve performance.问题原因uniapp的v-for写法导
·
前言
- os :win10
- HBuilder X :2.7.14.20200618
- 微信开发者工具 win32 :1.03.2006090
问题
每当使用微信开发者工具预览小程序时,均会在控制台(Console)看到警告(Warn)信息:Now you can provide attr wx:key for a wx:for to improve performance.
问题原因
uniapp的v-for写法导致。
修改前的写法如下:
<view class="comment-content" v-for="(item,index) in commentList">
<!-- 评论用户头像 -->
<view class="comment-content-left">
<image class="comment-content-headImage" :src="item.formHead" mode="center"></image>
</view>
<view class="comment-content-right">
<!-- 评论用户名 -->
<view class="comment-content-name">{{item.formNick}}</view>
<!-- 评论内容 -->
<view class="comment-content-text">{{item.content}}</view>
<!-- 评论日期 -->
<view class="comment-content-time">{{item.commentTime}}</view>
</view>
</view>
解决办法
v-for搭配key使用
解决后的写法如下:
<view class="comment-content" v-for="(item,index) in commentList" :key="index">
<!-- 评论用户头像 -->
<view class="comment-content-left">
<image class="comment-content-headImage" :src="item.formHead" mode="center"></image>
</view>
<view class="comment-content-right">
<!-- 评论用户名 -->
<view class="comment-content-name">{{item.formNick}}</view>
<!-- 评论内容 -->
<view class="comment-content-text">{{item.content}}</view>
<!-- 评论日期 -->
<view class="comment-content-time">{{item.commentTime}}</view>
</view>
</view>
参考
- https://ask.dcloud.net.cn/question/65247
更多推荐



所有评论(0)