vue怎么用v-model双向绑定Form表单

其他教程   发布日期:2025年04月02日   浏览次数:181

这篇文章主要介绍“vue怎么用v-model双向绑定Form表单”,在日常操作中,相信很多人在vue怎么用v-model双向绑定Form表单问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”vue怎么用v-model双向绑定Form表单”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

    vue初用antd 用v-model来双向绑定Form表单

    第一次用vue使用ant designUI框架,还没从elementUI中转换过来…

    于是在不能用Modal模态框,需要在页面传值接收的时候

    1. handleEdit (record) {
    2. this.$router.push({ path: '/form/base-form', query: { id: record, title: 'Edit' } })
    3. }

    form页面接收:

    1. init () {
    2. // 接收传递数据
    3. const { id, title } = this.$route.query
    4. this.param = id
    5. this.title = title
    6. this.temp = Object.assign({}, this.param)
    7. },

    仍是用的v-model去绑定表单的值:

    1. <a-form-item
    2. label="Name"
    3. :labelCol="{lg: {span: 1}, sm: {span: 7}}"
    4. :wrapperCol="{lg: {span: 6}, sm: {span: 17} }">
    5. <a-input
    6. v-model="temp.name"
    7. v-decorator="[
    8. 'name',
    9. {rules: [{ required: true, message: '请输入你的昵称' }]}
    10. ]"
    11. name="name"
    12. placeholder="昵称" />
    13. </a-form-item>

    发现这里根本绑不上去啊o(

    以上就是vue怎么用v-model双向绑定Form表单的详细内容,更多关于vue怎么用v-model双向绑定Form表单的资料请关注九品源码其它相关文章!