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">

 

 
复制代码

 

posted @   诉诉飞飞  阅读(2142)  评论(0编辑  收藏  举报
编辑推荐:
· .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技术实操系列(六):基于图像分类模型对图像进行分类
点击右上角即可分享
微信分享提示