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相关推荐
- uni-app开发微信小程序时u-view自定义样式不生效
背景: 在使用uni-app开发微信小程序时,设置原生样式后无效 test1.vue文件 <template><view><u-radio-group v-model=& ...
- [原创] HBuildX,微信小程序模拟器报错(如若已在管理后台更新域名配置,请刷新项目配置后重新编译项目)
今天在学习使用uniapp,开发微信小程序时第三方登录时,HBuild编辑器报了一个错误,经过定位分析,确定代码是没有问题的,报错如下 如若已在管理后台更新域名配置,请刷新项目配置后重新编译项目 经过 ...
- uniapp开发微信小程序,从构建到上线
前言: 本文主要介绍 uniapp 的基础使用,以及使用 uniapp 在企业开发的过程中的一个详细流程,比较适合第一次使用uniapp 开发微信小程序的伙伴,或者没有过实战经验的小伙伴参考:使用 H ...
- uniapp开发微信小程序分享功能
记一次uniapp开发微信小程序遇到的问题, 问题: 关于button的分享属性, 在HbuilderX中开发时,直接将button覆盖在image上,将button设置为透明,可以直接实现分享功能, ...
- uniapp开发微信小程序-7.用户填写表单信息
uniapp开发微信小程序-7.用户填写表单信息 本章让用户通过表单更新自己的个人信息,也是本系列文章最后一篇入门分享,之后碰到新颖.常用的功能会继续分享给大家,如果大家有任何问题欢迎留言,我会尽快线 ...
- uniapp开发微信小程序使用painter绘制海报
uniapp开发微信小程序使用painter绘制海报 参考文章: 1.简书大佬文章https://www.jianshu.com/p/e9cab600cf6c 2.CSDN大佬文章https://bl ...
- uniapp开发微信小程序-4.页面跳转与横向滑动
uniapp开发微信小程序-4.页面跳转与横向滑动 本篇文章主要是想记录一下横向滑动功能,备忘的同时给大家做个分享. 但既然是初级分享系列文章,为了方便新手朋友的上手工作,还是在此之前说一下页面跳转的 ...
- uniapp开发微信小程序 wx.navigateBack()携带数据问题
uniapp开发微信小程序 wx.navigateBack()携带数据问题 某个表单页面 有时需要跳转另一个页面查询数据 但如此想要保存当前页面数据需要在另一个查询页面调用 wx.navigateBa ...
- uniapp开发微信小程序,引用微信物理查询插件
使用uniapp开发微信小程序,引用微信官方提供的物流查询插件 开发时遇到的问题: 项目内有两个分包都有使用物流查询插件,所以插件的引入只能放在manifest.json>mp-weixin里面 ...
最新文章
- 详解python2 和 python3的区别
- Serverless:为我们到底带来了什么
- angular2 安装
- 工具SSHSecure连接远程服务器步骤
- 排序算法:桶排序、计数排序、基数排序
- Linux的cmake3的安装 cmake3编译安装成功了的 yum对于cmake3表示成功但实际没成功
- 斐波那契数列的两种实现呢
- linux 下source命令
- 禁止html文件控件手动输入的方法
- 【RMQ问题】求数组区间最大值,NYOJ-1185-最大最小值
- Oracle DataGuard数据备份方案详解
- Codeforces Round #191 (Div. 2) A. Flipping Game【*枚举/DP/每次操作可将区间[i,j](1=i=j=n)内牌的状态翻转(即0变1,1变0),求一...
- 45万年薪web前端工程师,给你一条“不归路”-系统的web前端学习路线
- python计算各对应位乘积之和_Python与线性代数基本概念
- 金三银四大厂面经总结,淘汰了80%的Java面试者
- (Electronic WorkBench)EWB仿真JK触发器
- 问卷调查设计应注意避免的六大禁忌
- nginx 解析二级域名
- 「浙江名度控股」小程序的一些运营推广方法
- 软件研发成本构成中的间接成本包括哪些?