vue使用动态渲染v-model输入框无法输入内容

最新推荐文章于 2024-04-23 16:51:15 发布
最新推荐文章于 2024-04-23 16:51:15 发布
阅读量717 收藏
点赞数
原文链接：http://www.cnblogs.com/victorlyw/p/10573149.html
版权
在使用ElementUI框架动态渲染表单时遇到输入框无法输入内容的bug，尽管v-model绑定的数据会更新。解决办法是将动态生成的表单对象深拷贝到data对象中。
摘要由CSDN通过智能技术生成

最近使用ElementUI框架，在动态渲染表单的时候，表单框无法输入内容，但是绑定model的数据是会发生变化

解决方法：

将动态生成的表单对象，深拷贝到 data 对象中

<el-date-picker v-model="schemeRulesForm[item.names[0]]" type="date" placeholder="选择日期"></el-date-picker>
data () {
    return {
最低0.47元/天 解锁文章
weixin_30667649
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue3+element-plus 表单输入框无法输入
veceny的博客
03-12 4271
【代码】vue3+element-plus 表单输入框无法输入。
Vue表单项赋值后无法输入问题解决
PorkCanteen的博客
05-02 866
v-model。
VUE input v-model 导致无法输入
m0_71349739的博客
03-17 1231
的数据进行了绑定以后，会发现无法再修改输入框的的数据，使用this.$set()可以解决这个问题。使用vue时，当对v-
动态绑定v-model,并解决输入框无法输入和无法双向绑定问题
逆水行舟 不进则退
06-09 3103
动态给输入框绑定v-model，并解决输入框无法输入信息和双向绑定问题
VUE 使用v-model 导致input输入框无法输入内容
weixin_38527196的博客
07-22 1923
VUE 使用v-model 导致input输入框无法输入内容
Vue中动态渲染输入框并v-model绑定后无法输入
xyf的博客
08-22 7474
最近遇到一个根据后台返回来动态渲染表单的需求，但是input在v-model后无法输入了。 原因：Vue无法检测普通的新增属性 解决：通过this.$set()新增 <el-form :model="form" :inline="true"> <el-form-item v-for="item of data" :label="`${item.desc}：`" :key="item.value"&
vue动态生成的表单列表，v-model无法输入，v-model更新不及时问题
siriva的博客
11-28 2705
其实问题很简单，在我们动态生成表单的时候记得要把字段在:model里面初始化，意思就是要先在data(){}里return{}的你的form字段里初始化出来！
浅析Vue.js中v-bind v-model的使用和区别
10-17
在Vue.js中，除了v-bind和v-model，还有其他如v-if、v-else、v-for等指令，它们共同构成了Vue.js强大的数据绑定和动态渲染机制。v-if用于条件渲染元素，v-else和v-else-if提供条件分支；v-for则用于列表渲染，能够...
vue.js指令v-model使用方法
10-20
当在模板中使用v-model时，Vue.js会动态创建一个计算属性，这个计算属性依赖于对应的data属性，并将输入元素的`value`绑定到这个计算属性上。 当用户更改输入框内容时，计算属性会更新，同时Vue.js的响应式系统检测...
VUE中v-model和v-for指令详解
08-30
例如，在一个 todo 列表应用中，我们可以使用 v-for 指令将 todo 项渲染到模板中，同时使用 v-model 指令将每个 todo 项的文本绑定到输入框中。 v-model 和 v-for 指令是 Vue 中两个非常重要的指令，它们可以帮助...
Vue的列表渲染和双向绑定（初学vue之v-for以及v-model）
百赢出品，必属精品
04-23 1771
列表渲染是指将数据集合（通常是数组）中的每个数据项渲染成相应的 DOM 元素，通常用于显示列表、表格等内容。双向绑定是指视图（DOM）与数据模型之间的双向关联，当数据模型发生变化时，视图会更新；反之亦然，当用户在视图中输入内容时，数据模型会相应地更新。
v-model绑定导致的element UI文本框输入第一次值后被绑定，导致空文本框无法再输入文字
好看的皮囊千篇一律，有趣的灵魂万里挑一。
09-16 714
在工作岗位上，上边分配一个任务，创建一个页面，从0-1，全部自己搭建，也没有啥模版，就这么来，那就直接来吧，没办法，那就直接上手，开发过程中，我使用了v-model对输入文本框的值进行双向绑定，这样可以直接使用用户输入文本框的值，同时，后端传递的值也可以直接展示到文本框中，这样就实现文本框的双向绑定，但是需要注意的是，使用文本框有风险，一不小心就会碰到和我一样的问题，在输入了第一次值后，明明是一个空的文本框，你去输入文字，发现怎么输入数值，都是空的无法输入。但是我js就只有一个。
element-ui的el-input组件使用v-model部署出现无法输入情况
qq_52568607的博客
09-11 1716
el-input组件使用v-model部署后无法输入
oninput引发v-model失效
weixin_45894503的博客
04-20 1130
问题场景 例：在el-input中先输入中文字符,再输入数字,v-model失去监听 <el-input v-model="ruleForm.refundMoney" disabled="disabled" :placeholder="`本次可以退款最高${dataList.canRefundAmount}美元`" oninput="value=value.replace(/[^0-9.]/g,'')" clearable/> 原因分析： v-model本
vue 在循环之后 v-model不起作用 输入框不能输入值
weixin_44514665的博客
09-20 5129
问题：开始没有修改绑定值 searchInfo值的时候，没有问题。当我在以下代码中修改之后就出问题了 computed:{ searchInfo:{ get:function () { let object=this.searchObject; this.formItemList.forEach(value=>{ this.$set(object,[value.prop],value.data.
vue3使用响应式数据 + v-model导致响应式失效el-form表单无法输入的问题
好好学习天天向上
07-25 1612
原因就是 el-form 声明了ref=“service”，导致 state 中声明的 service 被覆盖，2者冲突了。重构vue2项目时发现的问题，原始项目使用的是。的值一样导致出现了这样的问题。其实vue3可以使用适配的。
本地小说阅读器可执行文件新版
最新发布
08-29
导入小说，需通过文件-转换，选择txt小说，生成同名小说文件夹； 之后通过文件-小说，选择小说文件夹，就完成小说导入了。 txt小说只需转换一次。
el-input输入框使用oninput或onkeyup后，v-model双向绑定失效
07-03
当在 Vue 中使用 `el-input` 组件并尝试结合 `oninput` 或 `onkeyup` 事件监听器与 `v-model` 双向数据绑定时，可能会遇到一个问题。这是因为 `v-model` 实际上是在底层自动触发 `input` 事件的，而当你手动添加了如...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值