微信小程序 wx:for 循环中 同index 怎样获取多个输入框的值
时间: 2023-10-11 10:08:23 浏览: 62
在微信小程序的wx:for循环中,如果需要获取同一个索引的多个输入框的值,可以使用数据绑定和事件处理函数相结合的方式来实现。
具体做法是,在每个输入框上设置一个data-index属性,并将其值设置为当前循环的索引值index。然后,在输入框的input事件处理函数中,通过event.target.dataset.index来获取到当前输入框的索引值,并将输入框的值存储到对应的数组中。
例如,假设有一个数组列表dataList需要渲染,每个列表项都包含两个输入框,需要获取每个输入框的值:
```
<view wx:for="{{dataList}}" wx:key="{{index}}">
<view class="list-item">
<input type="text" data-index="{{index}}" bindinput="onInput1" />
<input type="text" data-index="{{index}}" bindinput="onInput2" />
</view>
</view>
```
在这个例子中,我们在每个输入框上绑定了data-index属性,并将其值设置为当前循环的索引值index。然后,在onInput1和onInput2事件处理函数中,我们可以通过event.target.dataset.index获取到当前输入框的索引值,并将输入框的值存储到对应的数组inputValue1和inputValue2中。
```
Page({
data: {
dataList: [],
inputValue1: [],
inputValue2: []
},
onInput1: function(event) {
var index = event.target.dataset.index;
var value = event.detail.value;
this.data.inputValue1[index] = value;
},
onInput2: function(event) {
var index = event.target.dataset.index;
var value = event.detail.value;
this.data.inputValue2[index] = value;
}
})
```
需要注意的是,在使用数据绑定和事件处理函数的方式时,需要确保数组inputValue1和inputValue2的长度与dataList的长度相同,否则可能会出现数组越界等问题。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)