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

最新推荐文章于 2023-12-03 13:32:09 发布

代码敲完就去玩

最新推荐文章于 2023-12-03 13:32:09 发布

阅读量1.4k

点赞数 3

分类专栏：微信小程序文章标签：微信小程序小程序微信

本文链接：https://blog.csdn.net/webxiaoba/article/details/128402375

版权

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

4 篇文章 0 订阅

订阅专栏

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

摘要由CSDN通过智能技术生成

动态循环中的列表可以通过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
                            })
                  }
    })