微信小程序for循环里面添加input事件

比眉伴天荒 2022-12-27 01:44 165阅读 0赞

1，在微信小程序for循环里面添加input事件，并把input输入值添加到列表里面

![20201207103332830.png][]

2.wxml

<view class="item"   wx:for="{
       {list}}" wx:for-item="vo" wx:key="index"   data- 
       item="{
       {vo}}">
      <view class="col">{
       {vo.name}}</view>
      <view class="col2">{
       {vo.task_startTime}}</view>
      <view class="col2">{
       {vo.task_endTime}}</view>
      <view class="col">{
       {vo.work_hours}}</view>
      <view class="col stepper"  >
        <input data-id="{
       {index}}" value="{
       {vo.money}}" bindfocus="bindFocus" bindinput="bindKeyInput"></input>
      </view>
    </view>

js

data:{
     list:[
         {
            name:'嘻嘻',
            task_startTime:'2020/12/03 12:56',
            task_endTime:'2020/12/03 15:56',
            work_hours:'3.0',
            money:0
          }
        ],
     inputValue: '',
        focusId: ''
    },
     bindFocus: function (event) {
        let id = event.currentTarget.dataset.id
        console.log(id)
        this.setData({
          focusId: id
        })
      },
    
      bindKeyInput: function (event) {
           let that = this;
        let value = Number(event.detail.value)
        let id = event.currentTarget.dataset.id
      
       
        var up = 'list[' + id + '].money';
        this.setData({
          [up]:value 
        })
    
        console.log(that.data.focusId)
        console.log(that.data.list)
       
      },

![20201207103827635.png][]

[20201207103332830.png]: /images/20221120/f76897267b5d41bfa08479fd03ec4a85.png
[20201207103827635.png]: /images/20221120/e18f5cec4ab9437e8b274b46614be95d.png

发表评论取消回复

表情：

评论列表（有 0 条评论，165人围观）

还没有评论，来说两句吧...

相关阅读

相关微信小程序wx:for循环列表渲染

列表渲染 wx:for 语法： wx:for=\{ \{xxx\}\} 书写位置：某一个组件的属性部分此时可以在该指令所在的组件上通过： \{ \{

Bertha 。/ 2023年02月21日 06:29/ 0 赞/ 3 阅读

相关微信小程序——添加广告

微信小程序——添加广告要想在微信小程序中加入广告，首先要在微信小程序后台开通流量主流量主需要满足：1、累计独立访问（uv)不低于1000；2、有严重违规的小程序不

川长思鸟来/ 2023年02月10日 05:04/ 0 赞/ 475 阅读

相关微信小程序for循环里面添加input事件

1，在微信小程序for循环里面添加input事件，并把input输入值添加到列表里面 ![20201207103332830.png][] 2.wxml <vie

比眉伴天荒/ 2022年12月27日 01:44/ 0 赞/ 166 阅读

相关微信小程序的input组件的冒泡事件解决

微信小程序解决冒泡事件是用catch，非冒泡事件是bind 我的需求是在复选框中点击输入框请输入时，不能操作选中事件，选中事件会发生的原因就是冒泡机制 ![在这里插入

冷不防/ 2022年12月16日 09:20/ 0 赞/ 290 阅读

相关微信小程序使用input

html部分 <view class="item" wx:for="{ {setList}}" wx:key="index"> <text class="l

柔光的暖阳◎/ 2022年11月05日 08:48/ 0 赞/ 205 阅读

相关微信小程序事件处理

一、什么是事件? 1.一种用户的行为用户长按某一张图片，点击某个按钮，这就是用户的行为，也是事件 2.一种通讯方式为什么说事件也是一种通讯方式呢？因为用户点击按

骑猪看日落/ 2022年05月29日 06:22/ 0 赞/ 333 阅读

相关微信小程序循环数据

新建一个页面 ![20180610174428774][] 在JS中写数据 ![20180610174435760][] 然后在wxml文件用wx:for来循环， i

深藏阁楼爱情的钟/ 2022年05月21日 22:08/ 0 赞/ 226 阅读

相关微信小程序--wx:for循环多个嵌套数组

读取数据，数组下有多个数组： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNz

àì夳堔傛蜴生んèń/ 2022年03月10日 19:42/ 0 赞/ 1010 阅读

相关微信小程序之使用wx:for遍历循环

效果图如下: ![1255290-20190719201252093-224167622.png][] 实现代码如下: type.js: // pages/t

今天药忘吃喽~/ 2021年11月13日 19:36/ 0 赞/ 289 阅读

相关微信小程序 - 循环语句wx:for的使用

小程序的循环结构：wx:for，其中，wx:for对应的是要循环的那个数组，wx:for-index对应的是循环数组的索引值，wx:for-item对应的是循环数组中的每一

刺骨的言语ヽ痛彻心扉/ 2021年08月13日 17:57/ 0 赞/ 1325 阅读