1.png

在我的小程序项目中,需要根据一个家庭成员数组生成表单,其中有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;
}
Last modification:April 22, 2020
If you think my article is useful to you, please feel free to appreciate