小程序循环输入框(vue适用)

添加更多输入框(传后台为数组)

---

• 在本项目中需要添加更多的地址 更像淘宝/美团/京东收获地址一样 地址数量是自定义的
  如果是自定义那就是数组了

代码如下

---

 siteList: [
      {
        number: null,
        sex: undefined,
        detailSite: null,
        site: undefined
      }
    ],

<view class="bgbai bgbaiItem" wx:for="{{siteList}}" wx:key="{{index}}">
		<view class="inputBox">
			<label class="formLabel">
				招聘人数：
				<input bindinput="onDepartmentChange" data-name="number" data-id="{{index}}"></input>
			</label>
			<label class="formLabel">
				性别要求：
				<button bindtap="sexAsks" data-name="sex" data-id="{{index}}">{{item.sex}}</button>
			</label>
			<label class="formLabel">
				工作地点：
				<!-- <navigator url="/pages/workplace/workplace"> -->
				<button name="site" bindtap="SelectSite" data-id="{{index}}" data-name="site">{{item.site}}</button>
				<!-- </navigator> -->
			</label>
			<label class="formLabel">
				详细地点：
				<input bindinput="onDepartmentChange" data-name="detailSite" data-id="{{index}}"></input>
			</label>
		</view>
	</view>

// 拿招聘人数做例子
// 当在招聘人数这个input 输入    获取绑定的属性 和 索引
// 这样就可以在数组里边对应的值了
 onDepartmentChange(event){
    var  id  =  event.target.dataset.id //当前组件的id
    var name = event.target.dataset.name //需要接收的属性，比如我的对象是{depName:"",depIntro:""}，这里的name就会是depName或者depIntro，在wxml中用data-name="depName"绑定
    var  index  =  "siteList["  +  id  +  "]."  +  name;
    console.log(index)
    this.setData({        
      [index]: event.detail         //这里进行赋值   
    }) 
  },