uni-app 转h5 input每次输入一个字符后自动失去焦点
背景:每扫一个二维码 会在weightList数组里面添加一个对象 ,其中对象中的一个属性值和input输入框 进行双向绑定。在输入框输入的时候,每输入一次,输入框就自动失去焦点了
错误代码如下:
<view v-for="(item, i) in weightList" :key="item"> <view class="bywin-column"> <view class="title"> <text>总数量</text> <text class="item-required">*</text> </view> <input v-model="item.num" class="bywin-input" placeholder="请输入" type="number" @input="printDigitNum($event, i)" /> <text class="bywin-input" style="flex: 0 0 10%">件</text> </view> </view>
printDigitNum(e, i) {
const value = e && e.detail.value;
this.$nextTick(() => {
this.weightList = this.weightList.map((v, index) => ({
...v,
num: parseInt(i) === parseInt(index) ? parseInt(value) : v.num,
}));
});
},
问题原有:
问题是有:key="item"引起,input数据绑定后进行模型更新后,view的属性要刷新,进行渲染后就重新刷新的input。如果你是要在代码中找view,可以直接找数组中不变的属性为key值,而不要用子节点绑定的数据给父节点的属性赋值。
解决方案:
<view v-for="(item, i) in weightList" :key="'weightList'+i">
分类:
项目遇到的问题
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗?
· 【译】Visual Studio 中新的强大生产力特性
· 【设计模式】告别冗长if-else语句:使用策略模式优化代码结构
· AI与.NET技术实操系列(六):基于图像分类模型对图像进行分类