最近使用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. 解决js的 Math取正弦值 余弦值不准确的问题

    //角度 var  vAngle=90: //正弦值 var vSin=Math.round(Math.sin((vAngle * Math.PI/180)) * 1000000) / 1000000 ...

  2. TabLayout基本使用

    前言 Tablayout继承自HorizontalScrollView,可以用作顶部标签效果.底部导航栏效果.一般多与ViewPager一起使用. 想直接了解如何实现短下滑效果的请看:TabLayou ...

  3. 确定有穷自动机(DFA)的化简(最小化)

    参考博客地址:https://blog.csdn.net/qq_33605778/article/details/80105658

  4. windows服务加定时器实现

    首先在项目中添加windows服务 然后双击“MainService.cs”,在上面点右键“打开代码” 以下是我的实例代码 partial class MainService : ServiceBas ...

  5. tcp config

    $ sudo sysctl net.ipv4.tcp_reordering=1 $ sudo sysctl net.ipv4.tcp_thin_linear_timeouts=1 $ sudo sys ...

  6. C# 在类中使用Timer定时器以及延时处理的方法

    我们平时在C#中要用到定时功能时,有自带定时器,一般在定时器里面写函数就行了,现在需要在类里面写了一个定时器,不和界面绑定,一开始的时候感觉没什么思路,然后看了一下界面的设计代码,有了思路,还是很简单 ...

  7. redis主从同步故障切换及集群配置

    一.redis是一中高性能的缓存数据库, 原理:1. 从服务器向主服务器发送 SYNC 命令.2. 接到 SYNC 命令的主服务器会调用BGSAVE 命令,创建一个 RDB 文件,并使用缓冲区记录接下 ...

  8. 使用Selenium模块报错的解决办法 (FileNotFound,WebDriverException)

    添加Chrome浏览器程序的目录到系统Path变量中: C:\Users\%USERNAME%\AppData\Local\Google\Chrome\Application ,使用pip3 inst ...

  9. jupyter notebook——安装配置

    本地登陆 cmd输入下面的命令,会进入用户主目录 jupyter notebook 在浏览器打开时,提示输入token,复制命令行上的token还是不能进入,其实浏览器上有提示的,按照提示操作即可,输 ...

  10. js循环中使用async/await踩过的坑

    最近写koa的时候遇见需要在循环中使用async/await的情况,当然第一反应就是直接上forEach,然后就直接翻车了... 直接上代码: function handleSql(val) { re ...