怎么觉得 Vant UI 的表单组件有点愚蠢啊

[yetrun]

如下：

<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 不能去掉，去掉后就无法输入。他们是没弄清楚受控组件和非受控组件的区别吗？

[iOCZ]

v-model 肯定是要的。name 名称，作为提交表单时的标识符。如果能把 v-model 的变量名作为默认 name 固然是更方便的做法。

[sjhhjx0122]

vant 的表单确实难用，一般我们都是直接用单独的表单库来跟 vant 结合

[wingkwanli888]

@sjhhjx0122 有沒什麼可以結合 vant 用的表单库啊