微信小程序批量渲染的van-field怎么获取输入的数据

最近一个刚入行不久的朋友写小程序遇到点问题，我给他搞了一下，顺便记录下

他选的 ui 框架是 vant-waapp ，想实现这样一个效果

这就不可避免的需要使用表单组件

用vant 的 field 批量渲染出来其实就是这样

但是现在就有一个问题，vant 没有那种集成的 form 表单，不能提交的时候自动获取所有数据，那就需要手动的绑定每一个输入项的事件，以便于实时获取输入后的值(他想用一个对象去收集所有表单的值，所以绑定的是 value="{{ formData.value4 }} 这种，然后绑定事件 bind:change='fieldChange ，因为是批量渲染出来的，而且需要手动去获取每一项改变之后的值，就需要每个输入项给一个标识，方便 fieldChange 函数去收集和区分当前改变的是哪一项的值，所以就需要加上 data-name='value5' 这样的标识)

fieldChange(e) {
    console.log('e', e);
}

结果是这样的

做到这一步，他当时都咧嘴一笑，继续往下写

结果就报错了

其实微信小程序要改变对象或者数组的值，需要这样写，用数组加字符串的格式就可以了

fieldChange(e) {
    this.setData({
        ['formData.value7']: 999,
        ['arr[0]']: 'www'
    })
}

然后这个项目这儿就需要 改一下

fieldChange(e) {
    this.setData({
        ['formData.' + e.currentTarget.dataset.name]: e.detail
    })
}

然后就完美解决

当时还有一个问题就是 这个图标

我记得有个 slot 可以搞 icon

他说 ui 库里 没有现成得 icon......然后 slot 里面又不能直接搞 image

哎，真头疼，不能直接搞 image 那就间接搞嘛

<van-cell-group>
<van-field label="抬头名称" value="{{ formData.value3 }}" placeholder="请输入抬头名称" title-width='120'  bind:change='fieldChange' data-name='value3' use-button-slot>
    <van-button round plain slot="button" color="#fff" bind:click='showPopup'>
        <image src="../../static/images/applyInvoiceicon.png" mode="widthFix" class="inputIcon" />
    </van-button>
</van-field>
</van-cell-group>

搞一个 btn ，然后背景搞成需要得颜色，里面放个图片不久解决了嘛

纠正一下： 这儿做的太麻烦了 那个 slot 下面的 label、left-icon、right-icon 等相当于是具名插槽，可以直接使用的

<van-cell-group>
<van-field label="抬头名称" value="{{ formData.value3 }}" placeholder="请输入抬头名称" title-width='120'  bind:change='fieldChange' data-name='value3'>
 <image src="../../static/images/applyInvoiceicon.png" mode="widthFix" class="inputIcon" slot='right-icon' />
</van-field>
</van-cell-group>

就可以直接实现了