Ant Design Vue2 表单双向绑定之大坑

异客东

已于 2023-12-01 23:58:27 修改

阅读量604

点赞数 9

分类专栏： vue 文章标签：前端 javascript 开发语言 vue anti-design-vue

于 2023-12-01 23:40:36 首次发布

本文链接：https://blog.csdn.net/TT_TGB/article/details/134745729

版权

vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Ant Design Vue2 表单双向绑定之大坑

一、问题描述

使用antd表单弄一个登录界面，以为这样就搞定了，代码如下：

<template>
    <div class="data">
        <div>
            <a-form :layout="formLayout" :model="form">
                <a-form-item label="姓名：">
                    <a-input v-model="form.username" placeholder="请输入姓名..."/>
                </a-form-item>
                <a-form-item label="密码：">
                    <a-input-password v-model="form.password" placeholder="请输入密码..." />
                </a-form-item>
                <a-form-item>
                    <a-button type="primary" class="submit" @click="submit()">
                        登录
                    </a-button>
                </a-form-item>
            </a-form>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            formLayout: 'vertical',
            form: {
            },
        };
    }
};
</script>

万万没想到未能实现，伤我心呀！找了好久的bug…

解决办法：只需要对v-model加上动态属性value，如：v-model:value,

没想到这么简单，蓝瘦…

一、最终结果：

<template>
    <div class="data">
        <div>
            <a-form :layout="formLayout" :model="form">
                <a-form-item label="姓名：">
                    <a-input v-model:value="form.username" placeholder="请输入姓名..."/>
                </a-form-item>
                <a-form-item label="密码：">
                    <a-input-password v-model:value="form.password" placeholder="请输入密码..." />
                </a-form-item>
                <a-form-item>
                    <a-button type="primary" class="submit" @click="submit()">
                        登录
                    </a-button>
                </a-form-item>
            </a-form>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            formLayout: 'vertical',
            form: {
            },
        };
    }
};
</script>