最近使用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. 算法(第四版)C# 习题题解——2.1

    写在前面 整个项目都托管在了 Github 上:https://github.com/ikesnowy/Algorithms-4th-Edition-in-Csharp 这一节内容可能会用到的库文件有 ...

  2. ECMAScript课程

    ECMAScript的语法使用      https://blog.csdn.net/m0_37452696/article/details/78370504 ECMAScript 6简介说明   h ...

  3. 读 vue 源码一 (为什么this.message能够访问data里面的message)

    12月离职后,打算在年后再找工作了,最近陆陆续续的看了黄轶老师的vue源码解析,趁着还有几天过年时间记录一下. 目标:vue如何实现通过this.key,就能直接访问data,props,method ...

  4. Java链接MySQL数据库的用配置文件和不用配置文件的代码

    1.利用配置文件(db.properties)链接MySQL数据库 package tool; import java.io.FileInputStream;import java.sql.Conne ...

  5. 关于transactionscope 事务的脏数据

    在一个项目中,关于新客的检测,如果查询到积分记录就是老客,因为检测的之前先积分,因为使用的是事务,造成本地代码没提交前已经有该会员的积分记录,而到数据库中却查询不到记录.造成永远都是老客,解决的方法是 ...

  6. ASP.NET - Validators

    ASP.NET validation controls validate the user input data to ensure that useless, unauthenticated, or ...

  7. javascript 之 数组

    定义:var colors=new Array(); var colors=new Array(3); var colors=new Array('red'); var colors=['red',' ...

  8. 牛客OI周赛9-提高组题目记录

    牛客OI周赛9-提高组题目记录 昨天晚上做了这一套比赛,觉得题目质量挺高,而且有一些非常有趣而且非常清奇的脑回路在里边,于是记录在此. T1: 扫雷 题目链接 设 \(f_i\) 表示扫到第 \(i\ ...

  9. yii restful和一般路由共存

    <?php namespace app\controllers; use Yii; use yii\rest\ActiveController; /** * */ class TestContr ...

  10. 【搬运工】redis 启动和关闭

    如果是用apt-get或者yum install安装的redis,可以直接通过下面的命令停止/启动/重启redis /etc/init.d/redis-server stop /etc/init.d/ ...