最近使用ElementUI框架,在动态渲染表单的时候,表单框无法输入内容,但是绑定model的数据是会发生变化

解决方法:

将动态生成的表单对象,深拷贝到 data 对象中

<el-date-picker v-model="schemeRulesForm[item.names[0]]" type="date" placeholder="选择日期"></el-date-picker>
data () {
return {
schemeRulesForm: null // form 表单数据
}
},
methods: {
// 获取表单 name 值
getRulesFormKey () {
let rulesForm = []
for (let i = 0; i < rulesFormItems.length; i++) {
// 日期做特殊处理
if (rulesFormItems[i].type == 'date') {
// 设置日期默认值
rulesForm[rulesFormItems[i].names[0]] = getDateToNumDay(rulesFormItems[i].toDate)
rulesForm[rulesFormItems[i].names[1]] = getThatTime()
}
}
this.schemeRulesForm = {...rulesForm}
}
}

vue使用动态渲染v-model输入框无法输入内容的更多相关文章

  1. vue + element 动态渲染、移除表单并添加验证

    博客地址:https://ainyi.com/66 又接到新需求了吧~~ 背景 在一个大表单里,有可能会出现这种需求,用户可以自己操作动态添加.移除表单,更加个性化的效果. 常见于填写个人信息.附加内 ...

  2. 类似智能购票的demo--进入页面后默认焦点在第一个输入框,输入内容、回车、right时焦点自动跳到下一个,当跳到select时,下拉选项自动弹出,并且可以按上下键选择,选择完成后再跳到下一个。

    要实现的效果:进入页面后默认焦点在第一个输入框,输入内容.回车.right时焦点自动跳到下一个,当跳到select时,下拉选项自动弹出,并且可以按上下键选择,选择完成后再跳到下一个. PS:自己模拟的 ...

  3. Python+Selenium自动化-清空输入框、输入内容、点击按钮

    Python+Selenium自动化-清空输入框.输入内容.点击按钮   1.输入内容 send_keys('valve'):输入内容valve #定位输入框 input_box = browser. ...

  4. input实时监听控制输入框的输入内容和长度,并进行提示和反馈

    一.前言 在MVVM模式下,有个双向数据绑定(data-binding)的优势,可以通过viewmodel实时的监听用户操作,也可以将model的改动实时的反馈到界面上. 那么,在传统的js操控DOM ...

  5. axios+vue实现动态渲染员工数据+数据是对象

    <style> table{ width: 600px; margin: 0 auto; text-align: center; border-collapse: collapse; /* ...

  6. vue时时监听input输入框中 输入内容 写法

    Vue input 监听 使用 v-on:input="change" 实现即可 App.vue <template> <div> <md-field ...

  7. vue缓存当前路由(在输入框中输入信息后,跳转其他路由再回来,仍可看到刚刚输入的内容等)

    缓存路由页面的当前状态:   <transition name="fade" mode="out-in"> <keep-alive> & ...

  8. input或者el-cascader的输入框随输入内容宽度自适应

    解决的思路是动态修改css的width 参考:https://blog.csdn.net/lianzhang861/article/details/84306139中的方法一, 如果是input,用o ...

  9. jquery.inputmask.js 输入框input输入内容格式限制插件

    今天使用的就是这几行代码. 利用 jquery.inputmask.js  下载地址(如果打不开的话 请FQ http://plugins.jquery.com/jquery.inputmask/) ...

随机推荐

  1. Xml & Tomcat

    文档声明: 简单声明, version : 解析这个xml的时候,使用什么版本的解析器解析 <?xml version="1.0" ?> encoding : 解析xm ...

  2. spring-IoC的配置文件applicationContext.XML

    <?xml version="1.0" encoding="UTF-8"?><beans xmlns="http://www.spr ...

  3. jieba库和好玩的词云

    首先,通过pip3 install jieba安装jieba库,随后在网上下载<斗破>. 代码如下: import jieba.analyse path = '小说路径' fp = ope ...

  4. Date日期类型的绑定

    自定义类型的绑定 springmvc没有提供默认的对日期类型的绑定,需要自定义日期类型的绑定 第一张图是po类中日期属性,第二张图是页面中日期属性的内容,第三张图片是访问出现400错误 因为日期的格式 ...

  5. python-request-各方法使用及格式

    Request库方法介绍 方法 说明 requests.request() 构造一个请求,支撑一下各方法的基础方法  requests.get()  获取HTML网页的主要方法,对应于HTTP的GET ...

  6. git\CentOS6.5中gitlab安装教程

    一.Git 起源: Git是一个开源的分布式版本控制系统,用于敏捷高效地处理任何或小或大的项目. Git 是 Linus Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本 ...

  7. js var 以及 let 的差异

    例子 window.checklist=[{"boardname":"motor_board","cur":"1.0.0" ...

  8. RabbitMQ跟Redis做消息队列的区别

    区别 https://www.zhihu.com/question/20795043 https://blog.csdn.net/dd18709200301/article/details/79077 ...

  9. django面试题

    1. 对Django的认识?   #1.Django是走大而全的方向,它最出名的是其全自动化的管理后台:只需要使用起ORM,做简单的对象定义,它就能自动生成数据库结构.以及全功能的管理后台. #2.D ...

  10. 2>&1 什么意思

    1.  0 表示stdin标准输入 2.  1 表示stdout标准输出 3.   2表示stderr标准错误 意思是:把标准错误重定向到标准输出?