如下:
<van-form @submit="onSubmit"> <van-cell-group inset> <van-field v-model="username" name="username" label="用户名" placeholder="用户名" :rules="[{ required: true, message: '请填写用户名' }]" /> <van-field v-model="password" type="password" name="password" label="密码" placeholder="密码" :rules="[{ required: true, message: '请填写密码' }]" /> </van-cell-group> <div style="margin: 16px;"> <van-button round block type="primary" native-type="submit"> 提交 </van-button> </div> </van-form>
import { ref } from 'vue'; export default { setup() { // 如果你要用 onSubmit 的参数,那么下面这两个变量仅仅是为了能够让输入框输入东西 const username = ref(''); const password = ref(''); const OnSubmit= (values: { username: string, password: string }) => { console.log('submit', values); }; return { username, password, onSubmit, }; }, };
van-field
中既要 v-model
又要 name
,而且 v-model
不能去掉,去掉后就无法输入。他们是没弄清楚受控组件和非受控组件的区别吗?
1 iOCZ 2023-02-11 17:34:39 +08:00 v-model 肯定是要的。name 名称,作为提交表单时的标识符。如果能把 v-model 的变量名作为默认 name 固然是更方便的做法。 |
![]() | 2 linkopeneyes 2023-02-11 22:41:09 +08:00 via Android vant 的表单确实难用,一般我们都是直接用单独的表单库来跟 vant 结合 |
3 wingkwanli888 2023-02-12 16:13:15 +08:00 @sjhhjx0122 有什可以合 vant 用的表单库啊 |