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/) ...
随机推荐
- 算法(第四版)C# 习题题解——2.1
写在前面 整个项目都托管在了 Github 上:https://github.com/ikesnowy/Algorithms-4th-Edition-in-Csharp 这一节内容可能会用到的库文件有 ...
- ECMAScript课程
ECMAScript的语法使用 https://blog.csdn.net/m0_37452696/article/details/78370504 ECMAScript 6简介说明 h ...
- 读 vue 源码一 (为什么this.message能够访问data里面的message)
12月离职后,打算在年后再找工作了,最近陆陆续续的看了黄轶老师的vue源码解析,趁着还有几天过年时间记录一下. 目标:vue如何实现通过this.key,就能直接访问data,props,method ...
- Java链接MySQL数据库的用配置文件和不用配置文件的代码
1.利用配置文件(db.properties)链接MySQL数据库 package tool; import java.io.FileInputStream;import java.sql.Conne ...
- 关于transactionscope 事务的脏数据
在一个项目中,关于新客的检测,如果查询到积分记录就是老客,因为检测的之前先积分,因为使用的是事务,造成本地代码没提交前已经有该会员的积分记录,而到数据库中却查询不到记录.造成永远都是老客,解决的方法是 ...
- ASP.NET - Validators
ASP.NET validation controls validate the user input data to ensure that useless, unauthenticated, or ...
- javascript 之 数组
定义:var colors=new Array(); var colors=new Array(3); var colors=new Array('red'); var colors=['red',' ...
- 牛客OI周赛9-提高组题目记录
牛客OI周赛9-提高组题目记录 昨天晚上做了这一套比赛,觉得题目质量挺高,而且有一些非常有趣而且非常清奇的脑回路在里边,于是记录在此. T1: 扫雷 题目链接 设 \(f_i\) 表示扫到第 \(i\ ...
- yii restful和一般路由共存
<?php namespace app\controllers; use Yii; use yii\rest\ActiveController; /** * */ class TestContr ...
- 【搬运工】redis 启动和关闭
如果是用apt-get或者yum install安装的redis,可以直接通过下面的命令停止/启动/重启redis /etc/init.d/redis-server stop /etc/init.d/ ...