为了账号安全,请及时绑定邮箱和手机立即绑定

Vue | Element:请教 el-form 的 :model 属性的作用

/ 猿问

Vue | Element:请教 el-form 的 :model 属性的作用

慕森卡 2019-04-18 17:15:59

<template>

    <div>

        <el-form :model="form" :rules="form" label-width="80px">

            <el-form-item label="姓名">

                <el-input v-model="form.name"></el-input>

            </el-form-item>

        </el-form>

    </div>

</template>


<script>

    export default {

        name: 'Father',

        data () {

            return {

                form: {

                    name: 'Tim' 

                }

            }

        }

    }

</script>


el-form 设置了 :model、:rules 两个属性,:rules 似乎是后续表单校验时需要使用,那 :model 属性的作用是什么呢?


官方文档将 el-form 的 model 属性描述为"表单数据对象",但如果不配置该属性,仅通过 v-model="form.name" 为表单域设置值已经可以实现数据绑定,为什么还要为 el-form 配置 model 这个属性呢?


---------------------------------- 分割线 -----------------------------------------------


<template>

    <div>

        <el-form :rules="rules" label-width="80px">

            <el-form-item label="姓名" prop="name">

                <el-input v-model="form.name"></el-input>

            </el-form-item>

        </el-form>

    </div>

</template>


<script>

    export default {

        name: 'App',

        data () {

            return {

                form: {

                    name: 'Tim' 

                },

                rules: {

                    name: [{ required: true, message: '姓名不能为空', trigger: 'blur' }]

                }

            }

        }

    }

</script>


查看完整描述

2 回答

?
wsb200514

以下表单指input或el-input这些,而el-form或el-form-item则会直接写明。

1、确实,在表单中有个v-model绑定后,el-form的model有没有一点都不影响,你可以删除不写。

2、目前el-form的model主要用表单验证的,也就是配合el-form的rules和el-form-item的prop来使用的。不信的话,你可以增加一个rules和prop(为了调用验证方法,也el-form也加一个ref属性,相当于id或者class选择器的意思),但是不写model,然后验证的话,会提示缺少model,导致无法验证成功。

所以el-form的model干嘛用的?目前看来主要是为了配合表单验证。里面的逻辑大概是,在el-form-item上写一个prop,这个prop左手对应着数据源(即用model.prop找到对应的数据源),右手对应着验证规则(即用rules.prop找到对应的规则)。然后就快乐地验证去了。

至于为什么不能将el-form的model+el-form-tem的prop这样的组合和表单中的v-model的用法合二为一,最直观的原因就是:这几个玩意是加在不同的标签上的啊,一种是针对表单的双向绑定,一种是针对el-form和el-form-item的验证(虽然这个验证的数据源最终就是表单那边双向绑定得来的);其次,你感觉一下,一边是利用双向绑定提供数据,另一边是拿到数据和规则进行验证,这两边没有很死板地捆绑在一起啊,类似于耦合度不高,未来自定义或者修改的话会方便很多。

查看完整回答
反对 回复 2019-08-14
?
MMTTMM

与数据绑定无关,rules验证是对model对象的验证,跟你在form中绑定了哪些数据无关


查看完整回答
反对 回复 2019-05-19

添加回答

回复

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信