vue使用动态渲染v-model输入框无法输入内容
最近使用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输入框无法输入内容的更多相关文章
- vue + element 动态渲染、移除表单并添加验证
博客地址:https://ainyi.com/66 又接到新需求了吧~~ 背景 在一个大表单里,有可能会出现这种需求,用户可以自己操作动态添加.移除表单,更加个性化的效果. 常见于填写个人信息.附加内 ...
- 类似智能购票的demo--进入页面后默认焦点在第一个输入框,输入内容、回车、right时焦点自动跳到下一个,当跳到select时,下拉选项自动弹出,并且可以按上下键选择,选择完成后再跳到下一个。
要实现的效果:进入页面后默认焦点在第一个输入框,输入内容.回车.right时焦点自动跳到下一个,当跳到select时,下拉选项自动弹出,并且可以按上下键选择,选择完成后再跳到下一个. PS:自己模拟的 ...
- Python+Selenium自动化-清空输入框、输入内容、点击按钮
Python+Selenium自动化-清空输入框.输入内容.点击按钮 1.输入内容 send_keys('valve'):输入内容valve #定位输入框 input_box = browser. ...
- input实时监听控制输入框的输入内容和长度,并进行提示和反馈
一.前言 在MVVM模式下,有个双向数据绑定(data-binding)的优势,可以通过viewmodel实时的监听用户操作,也可以将model的改动实时的反馈到界面上. 那么,在传统的js操控DOM ...
- axios+vue实现动态渲染员工数据+数据是对象
<style> table{ width: 600px; margin: 0 auto; text-align: center; border-collapse: collapse; /* ...
- vue时时监听input输入框中 输入内容 写法
Vue input 监听 使用 v-on:input="change" 实现即可 App.vue <template> <div> <md-field ...
- vue缓存当前路由(在输入框中输入信息后,跳转其他路由再回来,仍可看到刚刚输入的内容等)
缓存路由页面的当前状态: <transition name="fade" mode="out-in"> <keep-alive> & ...
- input或者el-cascader的输入框随输入内容宽度自适应
解决的思路是动态修改css的width 参考:https://blog.csdn.net/lianzhang861/article/details/84306139中的方法一, 如果是input,用o ...
- jquery.inputmask.js 输入框input输入内容格式限制插件
今天使用的就是这几行代码. 利用 jquery.inputmask.js 下载地址(如果打不开的话 请FQ http://plugins.jquery.com/jquery.inputmask/) ...
随机推荐
- Selenium及Headless Chrome抓取动态HTML页面
一般的的静态HTML页面可以使用requests等库直接抓取,但还有一部分比较复杂的动态页面,这些页面的DOM是动态生成的,有些还需要用户与其点击互动,这些页面只能使用真实的浏览器引擎动态解析,Sel ...
- Hive性能优化上的一些总结
https://blog.csdn.net/mrlevo520/article/details/76339075 1.介绍 首先,我们来看看Hadoop的计算框架特性,在此特性下会衍生哪些问题? 数据 ...
- Eclipse/MyEclipse导入导出注释模板
1.Eclipse/MyEclipse导入注释模板 (1)打开Eclipse/MyEclipse工具,打开或创建一个Java工程,点击菜单Window->Preferences弹出首选项设置窗口 ...
- ubuntu学习笔记
Linux操作系统 locale –a查看支持语言 ls查看目录 ls .l / 查看根目录 apt-get –h 安装软件看帮助信息 sudo apt-get inatall packge 安装包 ...
- 关于Ocelot和Consul 实现GateWay(网关) 服务注册 负载均衡等方面
Ocelot 路由 请求聚合 服务发现 认证 鉴权 限流熔断 内置负载均衡器 Consul 自动服务发现 健康检查 通过Ocelot搭建API网关 服务注册 负载均衡 1. ...
- js判断输入的input内容是否为数字
有时候我们输入的input的内容需要判断一下是否是数字,所以为了更好的客户体验,在前端先处理一下: <input type="text" name="val&quo ...
- ubuntu1604 golang环境
copy来的,这里记录一下 1. 升级系统: sudo apt-get upgrade 2. 安装docker 下载docker-ce: https://download.docker.com/lin ...
- java集合详解(附栈,队列)
1 集合 1.1 为什么会出现集合框架 [1] 之前的数组作为容器时,不能自动拓容 [2] 数值在进行添加和删除操作时,需要开发者自己实现添加和删除. 1.2 Collection接口 1.2.1 C ...
- Robot Framework自动化测试(1)
Python: https://www.python.org/ RF框架是基于python 的,所以一定要有python环境. Robot framework : https://pypi.pytho ...
- Java单例实现及分析
双重检验锁实现方式 public class Singleton { //定义一个私有的空构造方法,防止直接用new实例化 private Singleton() {} private static ...