之前我并没有具体了解过,所以我是用 Vue 的·ref指令通过 $refs 来获取,没想到失败了,不过好在这个问题网上有很多关于解决这个问题的说法,准确来说我们不是想用 ref 来获取表单数据,我们使用任何方法都是可以的,我们只想实现这个功能

如果不使用 uni-form 组件的话,我们还有一种方法,通过表单的 name 组件来获取我们的表单中的值

<form @submit="formSubmit">
			<label>
				<input id="username" type="text" focus placeholder="用户名" name="username">
				<input password type="text" placeholder="密码" name="password">
			</label>
			<button form-type="submit" @click="postLogin">登录</button>
			
			<button form-type="submit" @click="postUser">注册</button>
			
			<view class="no_password">
				<text>忘记密码</text>
			</view>
		</form>
formSubmit (e) {
	this.username = e.detail.value.username
	this.password = e.detail.value.password
}

我们可以给到form表单组件一个 @submit事件,当点击提交按钮的时候将触发这个函数,而这个函数将会接收到一个事件对象 e,然后我们打印一下这个事件对象 e 就不难发现在我所写的这个路径下就可以通过name值去访问 表单的 value 值 😃

Logo

前往低代码交流专区

更多推荐