V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
yetrun
V2EX  ›  Vue.js

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

  •  
  •   yetrun · 2023-02-11 17:02:54 +08:00 · 1838 次点击
    这是一个创建于 640 天前的主题,其中的信息可能已经有所发展或是发生改变。

    如下:

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

    3 条回复    2023-02-12 16:13:15 +08:00
    iOCZ
        1
    iOCZ  
       2023-02-11 17:34:39 +08:00
    v-model 肯定是要的。name 名称,作为提交表单时的标识符。如果能把 v-model 的变量名作为默认 name 固然是更方便的做法。
    sjhhjx0122
        2
    sjhhjx0122  
       2023-02-11 22:41:09 +08:00 via Android
    vant 的表单确实难用,一般我们都是直接用单独的表单库来跟 vant 结合
    wingkwanli888
        3
    wingkwanli888  
       2023-02-12 16:13:15 +08:00
    @sjhhjx0122 有沒什麼可以結合 vant 用的表单库啊
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1120 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 22:52 · PVG 06:52 · LAX 14:52 · JFK 17:52
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.