欢迎访问 生活随笔!

生活随笔

当前位置: 首页 >

uniapp开发微信小程序时,报错:Now you can provide attr `wx:key` for a `wx:for` to improve performance

发布时间:2024/9/19 44 豆豆
生活随笔 收集整理的这篇文章主要介绍了 uniapp开发微信小程序时,报错:Now you can provide attr `wx:key` for a `wx:for` to improve performance 小编觉得挺不错的,现在分享给大家,帮大家做个参考.

前言

  • 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

总结

以上是生活随笔为你收集整理的uniapp开发微信小程序时,报错:Now you can provide attr `wx:key` for a `wx:for` to improve performance的全部内容,希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错,欢迎将生活随笔推荐给好友。