如下:
<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
sjhhjx0122 2023-02-11 22:41:09 +08:00 via Android
vant 的表单确实难用,一般我们都是直接用单独的表单库来跟 vant 结合
|
3
wingkwanli888 2023-02-12 16:13:15 +08:00
@sjhhjx0122 有沒什麼可以結合 vant 用的表单库啊
|