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/) ...
随机推荐
- Centos7.2(linux)minimal install之后需要的操作
minimal install之后,很多命令都不存在,例如ifconfig, wget等等 首先,需要先配置网络,保证机器可以连上互联纲 ip addr可以查看网卡的基本信息 一般默认就只有两个,一个 ...
- Java过滤器Filter
过滤器 一. 简介 过滤器一般用于设置字符编码.登录验证.权限验证.敏感词过滤等,减少了代码的冗余,便于代码的复用,但是不一定是每个servlet都必须使用过滤器的. 二. 过滤器的工作流程 图片来源 ...
- ADO.Net的发展史
1.演变历史: 它们是按照这个时间先后的顺序逐步出现的,史前->ODBC->OLEDB->ADO->ADO.Net. 2.下面分别介绍一下这几个. a. 史前的数据访问是什么样 ...
- MATLAB 均方根误差MSE、两图像的信噪比SNR、峰值信噪比PSNR、结构相似性SSIM
今天的作业是求两幅图像的MSE.SNR.PSNR.SSIM.代码如下: clc; close all; X = imread('q1.tif');% 读取图像 Y=imread('q2.tif'); ...
- leetcode实战
leetcode记录 两数之和 题目 给定一个整数数组 nums 和一个目标值 target,请你在该数组中找出和为目标值的那 两个 整数,并返回他们的数组下标. 你可以假设每种输入只会对应一个答案. ...
- IIS简单的反向代理设置
下载IIS扩展 1.URL Rewrite 地址: https://www.iis.net/downloads/microsoft/url-rewrite 2.Application Request ...
- Linear Regression with machine learning methods
Ha, it's English time, let's spend a few minutes to learn a simple machine learning example in a sim ...
- SVN导出差异版本更新的文件列表
对于在服务器上没有使用版本控制的运维人员来说,每次SVN修改的文件都需要查看更改日志,一个个查找出来再更新到服务器,过程实在是痛苦 那么有没有一种方法跑个命令比对一下版本就哗啦啦的把修改好的文件复制出 ...
- vue中前端处理token过期的方法与axios请求拦截处理
在处理token过期的这个问题上困扰了我很久,现在终于解决的了,所以分享出来给大家,希望能够对大家有所帮助. 首先,当然是路由进行拦截,路由拦截当然是在beforeEach中了: router.bef ...
- SKU : Stock Keeping Unit
Stock Keeping Unit is a number assigned to a product by a retail store to identify the price, produ ...