小規模プログラム バージョンの Vant フィールド入力ボックスのバッチ双方向バインディング

HBulider X小さなプログラムを開発するときは、 uniapp+vueを使用します。

vant コンポーネント ライブラリ入力ボックスの小さなプログラム バージョンを使用しているときに、データの双方向バインディングを実現できないことがわかり、非常に悩みました。現時点では、双方向バインディングを実行する方法を使用できます。
我们可以使用change事件来实现数据监听

1. データ結果を保存するオブジェクトを宣言します。

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

2. 入力ボックスを定義します

バインドされたデータを使用すると:value、data-type値はオブジェクトのプロパティと同じになり、バインディング@inputイベント

<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. データの双方向バインディング

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

完全版

<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>