如何获取微信小程序中动态渲染的列表中的某一个数据

最新推荐文章于 2023-10-12 20:54:45 发布

原创最新推荐文章于 2023-10-12 20:54:45 发布 · 1.6k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #小程序 #微信

微信小程序专栏收录该内容

4 篇文章

订阅专栏

这篇博客介绍了如何在微信小程序中利用WXML的wx:for指令和JS事件绑定，通过数据绑定和dataset属性获取列表中特定项的下标，然后更新对应的列表数据。示例代码展示了如何在用户输入后，将输入值绑定到点击的列表项上。

动态循环中的列表可以通过index来获取

通过下标（index）来获取

wxml

//wxml
    <block
    wx:for="{{list}}"
    wx:key="{{id}}"
    data-index="{{index}}"
    bindtap="getInfrom"
    >
    <input type="number" value="{{item.id}}">
     <text>{{item.name}}</text>
    </block>

js

//js

page({
      data:{
            list:[
                    {
                       name:"张三",
                       id：""
                    },
                    {
                       name:"李四",
                       id：""
                    },  
                    {
                       name:"王五",
                       id：""
                    },
                ]
        }，
      getInfrom(e){
                    //点击的下标
                    let index = e.currentTarget.dataset.index
                    //点击的某一项
                    const clickItem = `list[${e.target.dataset.index}.id]`
                    //给点击的哪一项赋值
                    this.setDate({
                                clickItem : e.detail.value
                            })
                  }
    })