Small program version vant field input box batch two-way binding

When developing small programs, I use HBulider Xuniapp+vue for small program development

When using the small program version of the vant component library input box, we found that he could not realize the two-way binding of data, which made us very distressed. At this time, we can use a way to perform two-way binding
我们可以使用change事件来实现数据监听

1. Declare an object to store data results

import {
    
    reactive} from "vue";
const user = reactive({
    
    
   	phone: '',
   	code: ''
   })

2. Define the input box

Using :valuebound data, data-typethe value is the same as the property of the object, and the binding @inputevent

<van-field placeholder="请输入手机号"  :value="user.phone" data-type="phone"
				@change='inputUser'></van-field>
<van-field center clearable placeholder="请输入短信验证码" data-type="code" :value="user.code" @change='inputUser' >
</van-field>

3. Two-way binding of data

const inputUser = (e)=>{
    
    
		user[e.target.dataset.type] = e.detail
	}

full version

<template>
	<view class="app">
		<van-field placeholder="请输入手机号"  :value="user.phone" data-type="phone"
					 @change='inputUser'></van-field>
		<van-field placeholder="请输入短信验证码" data-type="code" :value="user.code" @change='inputUser' >
				</van-field>
	</view>
</template>

<script setup>
	import {
    
    
		reactive
	} from "vue";
	const user = reactive({
    
    
		phone: '',
		code: ''
	})
	const inputUser = (e)=>{
    
    	
		console.log(e);
		user[e.target.dataset.type] = e.detail
	}
</script>