Ant Design Vue在HTML页面中无法获取输入框绑定数据的问题求助

问题场景 #

在HTML页面开发Ant Design Vue项目时，纯Vue环境下功能正常，但引入Ant Design Vue组件库后，无法获取输入框数据。点击登录按钮能正常触发handleSubmit方法，但this.username和this.password始终为空。

相关代码 #

<head>
    <?php $this->head() ?>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ant-design-vue@3/dist/antd.min.css">
</head>
<body>
<?php $this->beginBody() ?>

<div id="app">
    <div class="login-container">
        <a-form @submit.prevent="handleSubmit">
            <a-form-item>
                <a-input v-model="username"></a-input>
            </a-form-item>
            <a-form-item>
                <a-input type="password" v-model="password"></a-input>
            </a-form-item>
            <a-form-item>
                <a-button type="primary" htmlType="submit" @click="handleSubmit" block>Login</a-button>
            </a-form-item>
        </a-form>
    </div>
</div>

<!-- bunches of scripts included... -->
<script src="https://cdn.jsdelivr.net/npm/ant-design-vue@3/dist/antd.min.js"></script>

<script>
    const app = Vue.createApp({
        data() {
            return {
                username: '',
                password: ''
            };
        },
        methods: {
            handleSubmit() {
                axios.post('http://api.yanglao.local/auth/login', {
                    username: this.username,
                    password: this.password
                }).then(response => {
                    if (response.data.success) {
                        alert('SUCCESS');
                    } else {
                        alert('FAIL: ' + response.data.message);
                    }
                }).catch(error => {
                    console.error('FAIL IN REQUEST: ', error);
                });
            }
        }
    });
    Object.values(antd).forEach(o => {
        if (typeof o == "object" && o.name) {
            app.component(o.name, o);
        }
    });
    app.mount("#app");
</script>

<?php $this->endBody() ?>
</body>
</html>

解决思路 #

1. 遵循Ant Design Vue 3.x表单绑定规则 #

Ant Design Vue 3.x的表单组件并非直接绑定普通变量，需要配合表单模型（Form Instance）使用。核心要点：

• 定义统一的表单数据对象，而非单独的变量
• 给<a-form>绑定model属性关联表单数据
• 给<a-form-item>设置name属性作为字段标识，实现表单字段与模型的关联

2. 代码修改步骤 #

• 在data中替换单独变量为表单数据对象：

  data() {
      return {
          formData: {
              username: '',
              password: ''
          }
      };
  }
  

• 修改<a-form>添加model绑定：

  <a-form :model="formData" @submit.prevent="handleSubmit">
  

• 给每个<a-form-item>添加name属性：

  <a-form-item name="username">
      <a-input v-model="formData.username"></a-input>
  </a-form-item>
  <a-form-item name="password">
      <a-input type="password" v-model="formData.password"></a-input>
  </a-form-item>
  

• 在handleSubmit中改用表单数据对象获取值：

  axios.post('http://api.yanglao.local/auth/login', {
      username: this.formData.username,
      password: this.formData.password
  })
  

3. 优化组件注册方式 #

当前批量注册组件的方式可能引入冗余组件，建议按需注册所需组件：

// 替换原有的批量注册代码
app.component('a-form', antd.Form);
app.component('a-form-item', antd.FormItem);
app.component('a-input', antd.Input);
app.component('a-button', antd.Button);

修改后的完整代码 #

<head>
    <?php $this->head() ?>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ant-design-vue@3/dist/antd.min.css">
</head>
<body>
<?php $this->beginBody() ?>

<div id="app">
    <div class="login-container">
        <a-form :model="formData" @submit.prevent="handleSubmit">
            <a-form-item name="username">
                <a-input v-model="formData.username"></a-input>
            </a-form-item>
            <a-form-item name="password">
                <a-input type="password" v-model="formData.password"></a-input>
            </a-form-item>
            <a-form-item>
                <a-button type="primary" htmlType="submit" block>Login</a-button>
            </a-form-item>
        </a-form>
    </div>
</div>

<!-- bunches of scripts included... -->
<script src="https://cdn.jsdelivr.net/npm/ant-design-vue@3/dist/antd.min.js"></script>

<script>
    const app = Vue.createApp({
        data() {
            return {
                formData: {
                    username: '',
                    password: ''
                }
            };
        },
        methods: {
            handleSubmit() {
                axios.post('http://api.yanglao.local/auth/login', {
                    username: this.formData.username,
                    password: this.formData.password
                }).then(response => {
                    if (response.data.success) {
                        alert('SUCCESS');
                    } else {
                        alert('FAIL: ' + response.data.message);
                    }
                }).catch(error => {
                    console.error('FAIL IN REQUEST: ', error);
                });
            }
        }
    });
    // 按需注册组件
    app.component('a-form', antd.Form);
    app.component('a-form-item', antd.FormItem);
    app.component('a-input', antd.Input);
    app.component('a-button', antd.Button);
    app.mount("#app");
</script>

<?php $this->endBody() ?>
</body>
</html>

内容的提问来源于stack exchange，提问作者Xu Chenfei