Hi all,
在某些特定的情况下,需要有多个输入框,输入框的数量不确定,所以通过wx:for的方式生成;
现在的问题是我如何从生成的多个输入框中,获取指定输入框的内容呢?
谢谢!
WXML代码如下:
<navigation-bar title="Weixin" back="{{false}}" color="black" background="#FFF"></navigation-bar>
<scroll-view class="scrollarea" scroll-y type="list">
<view wx:for="{{inArray}}" wx:key="value">
<input placeholder="input {{index+1}}" value="{{item.value}}" />
</view>
<button bind:tap="addInput">Add Input</button>
<button bind:tap="getValues">Get Values</button>
</scroll-view>
以下是JS代码:
Page({
data: {
inArray: [],
},
addInput() {
this.data.inArray.push({id: this.data.inArray.length+1, value: ""});
console.log("add input ", this.data.inArray.length.toString());
console.log(this.data.inArray);
this.setData({
inArray: this.data.inArray
})
},
getValues() {
for(let i = 0; i < this.data.inArray.length; i++) {
console.log("input", i.toString(), "value: ", this.data.inArray.value);
}
}
})
根据这篇博文中的方法,实现了我想要的效果:https://blog.csdn.net/asteriaV/article/details/110793708
但是,我还是不太清楚,博主是从哪里知道还有一个 "data-id" 这个属性的,我换 "id" 貌似不行。。。
在组件上面绑定自定义参数,索引啊,然后就可以精准赋值了
可以通过model:value绑定在循环的对象参数上
https://developers.weixin.qq.com/miniprogram/dev/framework/view/two-way-bindings.html
input 输入的 value,需要 赋值给 data 中的 inArray 中 index 的 value,
bindinput="{{inArray[index].value}}"