最近使用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. spring整合dubbo[单机版]

    Spring整合Dubbo,这个是用xml配置的 (方式一) 来梳理下步骤: 1. 安装zookeeper,在进行简单配置[这里使用单机模式,不用集群] 2. 创建maven项目,构建项目结构 3. ...

  2. ready

    // 定义一个动物类 function Animal (name) { // 属性 this.name = name || 'Animal'; // 实例方法 this.sleep = functio ...

  3. 【HNOI 2018】毒瘤

    Problem Description 从前有一名毒瘤. 毒瘤最近发现了量产毒瘤题的奥秘.考虑如下类型的数据结构题:给出一个数组,要求支持若干种奇奇怪怪的修改操作(例如给一个区间内的数同时加上 \(c ...

  4. 【GO】【gdb】

    1 安装homebrew 参考 https://www.cnblogs.com/suren2017/p/9249803.html ([Ruby][环境搭建]macOS Sierra 10.12.6 + ...

  5. libc++abi.dylib: terminating with uncaught exception of type NSException (lldb)

    In Xcode 9 and Swift 4: Print exception stack to know the reason of the exception: Go to show break ...

  6. SQL Server 视图(仅代码及练习)

    use electric go --建立供电局1#仓库所存放物资的视图. create view s1_stock as select * from stock where warehouse='供电 ...

  7. [转]C# winform与Javascript的相互调用

    C# winform与Javascript的相互调用 <html> <head> <meta http-equiv="Content-Language" ...

  8. 文献导读 | Single-Cell Sequencing of iPSC-Dopamine Neurons Reconstructs Disease Progression and Identifies HDAC4 as a Regulator of Parkinson Cell Phenotypes

    文献编号:19Mar - 11 2019年04月23日三读,会其精髓: 相信这种方法的话,那么它的精髓是什么,如何整合出这个core gene set. 首先要考虑样本的选择,样本里是否存在明显的分层 ...

  9. 在vue中使用watch监听对象或数组

    最近发现在vue中使用watch监听对象或者数组时,当数组或者对象只是单一的值改变时,并不会出发watch中的事件. 在找问题过程中,发现当数组使用push一类的方法时,会触发watch,如果只是单一 ...

  10. 怎么样获取小米手机4的ROOT超级权限

    小米手机4有何方法开通了Root超级权限?各位都清楚,Android手机有Root超级权限,一旦手机开通了root相关权限,能够实现更强大的功能,打比方各位部门的营销部门的妹纸,使用个别营销工具都需要 ...