在我的小程序项目中,需要根据一个家庭成员数组生成表单,其中有2个picker 下拉框。
问题1:当选择第二个家庭成员,修改关系成子女,上面的家庭成员关系也会发生改变
因为他们都是由同个索引 gxIndex 控制的。我发现这样不行,每个家庭成员都应有他自己的下拉索引。一番探索后,应该加上 :data-current="index"
picker代码如下:
<view class="cu-form-group">
<view class="title">关系</view>
<picker @change="dictPickerChange($event,'gxIndex')" v-model="item.ftype" :range="guanxi" :data-current="index">
<view class="picker">
{{guanxi[item.gxIndex]}}
</view>
</picker>
</view>
<view class="cu-form-group">
<view class="title">证件类型</view>
<input value="身份证" disabled></input>
</view>
<view class="cu-form-group">
<view class="title">证件号码</view>
<input v-model="item.fidcard" name="input"></input>
</view>
<view class="cu-form-group">
<view class="title">省内/省外</view>
<picker @change="dictPickerChange($event,'snIndex')" v-model="item.fprovince" :range="isSn" :data-current="index">
<view class="picker">
{{isSn[item.snIndex]}}
</view>
</picker>
</view>
这样在我的下拉选择事件中,就能知道是哪个家庭成员:
dictPickerChange(e,val) {
const curindex = e.target.dataset.current
console.log('选择的值'+e.detail.value);
console.log('这是第' + (curindex+1) + '个家庭成员');
if(val == 'snIndex'){
that.familys[curindex].snIndex = e.detail.value;
that.familys[curindex].fprovince = that.isSn[that.familys[curindex].snIndex];
}else if(val == 'gxIndex'){
that.familys[curindex].gxIndex = e.detail.value;
that.familys[curindex].ftype = that.guanxi[that.familys[curindex].gxIndex];
}
},
把选择的下标赋值给每个家庭成员中的gxIndex,就相当于每个家庭成员选中的是不一样的了,问题解决!
问题2:数据绑定问题
当我将关系从父亲改为子女后,页面上并没有实时的将显示文字从父亲改为子女,还是显示子女,只有等我再添加一个家庭成员时才会刷新出来。经过和同事讨论,认为可能有数据绑定在视图渲染之后,特别是一开始就要显示在页面上的数据,应该提前绑定好。
我的错误代码如下:
onLoad : function (option){
that.buyer = option;
that.family = JSON.parse(that.buyer.hcFamilys);
for(var i=0;i<that.family.length;i++){
that.family[i].gxIndex = 0;
that.family[i].snIndex = 0;
}
}
修改后的正确代码:
onLoad : function (option){
that.buyer = option;
var test = JSON.parse(that.buyer.hcFamilys);
for(var i=0;i<test.length;i++){
test[i].gxIndex = 0;
test[i].snIndex = 0;
}
that.family = test;
}