el-input在进行了v-model绑定后无法改变绑定值的错误使用

最新推荐文章于 2024-05-24 21:21:01 发布
最新推荐文章于 2024-05-24 21:21:01 发布
阅读量8.9k 收藏 2
点赞数 1
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jilige/article/details/106146441
版权

本来是个小问题，卡了好久，又耽误了项目计划进程，不得不说，前端我是真的菜（日常吐槽）

问题如下：
在从后台接受到数据后通过v-model绑定到input值后，发现无法对于input里的值改变

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
我在想是不是因为forEach(e=>{})中e的问题无法双向绑定，而后数据绑定代码改为：
在这里插入图片描述在这里插入图片描述
通过添加两个中间量来改变直接通过e来赋值，额，还是不行…

后面经过大量尝试，发现是不能直接定义form:{}
在这里插入图片描述
因为之前页面中对象form:{}通过Object.assign()使row拷贝到了form，所以绑定才能成功，真的难。
在这里插入图片描述

在搬砖的道路上，或多或少能学习到点点，知足常乐！

因为是搬砖，所以在借用大佬们写的模板时可能会出现理解不到位，所以每天向大佬学习，相信可以收到门的/爱过

守门人吉力
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vuejs学习笔记之使用指令v-model完成表单的数据双向绑定
10-17
在Vue.js中，`v-model`指令是实现数据双向绑定的关键，它允许开发者轻松地在视图和模型之间同步数据。在表单控件如输入框、文本域、单选按钮、复选框等元素上使用`v-model`，可以实现实时更新数据，极大地简化了前端...
vue自定v-model实现表单数据双向绑定问题
10-18
在传统的`v-model`使用中，我们通常直接在表单元素上应用，如： ```html <input v-model="price"> ``` 然后在Vue实例的`data`选项中定义相应的属性： ```javascript new Vue({ el: '#app', data: { price: ...
Vue3：有关v-model的用法
本以为成功很简单，没想到活成普通人都需拼尽全力！
02-23 5879
提起v-model，想必都不陌生，作为vue的经典语法，帮助我们在编写项目的时候，省了很多很多的事情，本文着重记录v-model在组件上的绑定使用！在默认的情况下，组件的都是使用modelValue作为自己的prop，使用update:modelValue作为对应的更新事件，有时候我们需要去改动一哈！基本规则就是，自定义的prop：xxx, 对应的更新事件：update:xxx, 组件上就变成了v-model:xxx的写法，下面以value举例
v-model绑定的值修改不了
07-14 1421
v-model绑定无法修改
vue通过for循环生成input框后双向绑定失效问题
最新发布
qq_44864879的博客
05-24 1092
有些时候页面上有太多的表单元素，一个个的写太过繁琐，拿 input 框举例，众多的 input 框，无非就是输入框前的说明和 input 框的 name 属性不一样</</</</</</</既然这样，何不弄一个数组，通过 for 循环遍历出来，岂不是更省事？经过一番尝试，终于成功，特此记录，便于后续回顾及帮助到有需要的人。
vue：input框使用v-model绑定值之后无法修改绑定值
W
10-07 1万+
日常给自己挖坑：搬来的砖，一个没注意的小细节就自己挖了个大坑 上代码： <el-form-item label="联系方式" prop="phone"> <el-input v-model="formLabel.phone"></el-input> </el-form-item> methods: { // 获取新增页面的默认电话号码 getAreaAndBankName() { apiRequest
element el-input输入框绑定值无法修改原因
weixin_55798503的博客
09-16 2656
大家多多指教
element ui组件赋值后部分组件修改数值无效情况解决
weixin_42192467的博客
06-28 2523
在使用过程中发现el-input-number无法输入，在网上搜资料，最终找到解决办法是在el-input-number上绑定@change=”changeVal($event)”
el-input 给v-model赋了默认值后不能编辑
bollvzwxxiao的博客
12-22 1517
el-input 给v-model赋了默认值后不能编辑
Vue循环中多个input绑定指定v-model实例
10-14
要动态绑定`v-model`并监听输入值的变化，可以在`v-for`循环中使用`@input`事件。例如： ```html <el-form> <el-form-item v-for="(item, index) in form" :key="index" :label="item.title"> <el-input v-...
Vue-input输入框输不了值改不了-select多选，选了没效果，视图没更新
路虽远行则将至，事虽难做则必成。
04-23 1284
在实际开发中添加修改的form表单，不是什么时候都是都是一一对应绑定form值的。来回赋值，频繁的修改v-model绑定的值就会发现输入不了值，或者选中值没效果，这是因为视图没更新解决方案我们只需要调用vue 的forceUpdate()方法，每改变一次值就强制更新视图。input输入框更新方案@input在- Input 值改变时触发<el-inputselect多选选择器@change-值改变时候触发<el-selectplaceholder="请选择"<el-option。
input 改变时触发_你可能没用过的v-model 时定制 prop 和 event
weixin_33522643的博客
11-28 257
大家可能在使用vue的时候已经很熟悉v-model指令了，但是有定制过prop和event吗？下面咱们来简单的说一说。vue允许一个自定义组件在使用 v-model 时定制 prop 和 event。默认情况下，一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event，但是一些输入类型比如单选框和复选框按钮可能想使用 value prop 来达到不同的目的...
ElementUI el-input无法输入、修改、删除问题解决
weixin_52394141的博客
12-01 1万+
使用 el-input 这个标签时，我有些情况下在 el-input 是无法输入的，绑定的值动也动不了，删也删不掉，改也改不了，所以我做了以下的解决方法的统计，希望可以帮助到大家！造成的结果就是从后端传来的数据只能显示在输入框中，不能改也不能删，所以大家也可以考虑一下这个情况，当然表单的数据最好也不要使用this，虽然不知道原理，但是问题确实出在this上，知道的友友请在评论区分享哦~3.我们有些时候可能会忘记加入v-model属性，来绑定输入框中的值，如果忘记加入了，记得补上。
Vue表单输入绑定(v-model)
ZerZhang的博客
10-10 553
Vue表单输入绑定(v-model)
el-input-number 默认值设置失效
hu961691590的专栏
08-24 3438
今天需要设置一个计数器在默认情况下是没有值的，有最大值和最小值。在百度上找的答案基本是通过绑定v-model的值为undefined，不知道为什么我这里没有效果，在尝试最简单的计数器下通过v-model绑定也没有成功。在前端的帮助下，通过在el-input-number中设置:min=null实现了默认值是没有值的，因为百度搜的答案都没有解决这种情况的问题，特此记录下来，希望能帮到更多人。 下面是代码和效果图： ...
input中的值绑定/v-model修饰符
407指导员
12-20 782
input中的值绑定 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>多选框</title> </head> <body> <div id="app"> <label :for="item" v-for="item in originHobbies"> <input typ
element的el-input-number的默认值的问题
热门推荐
Cainannan1995的博客
03-18 1万+
el-input-number默认值为0 的问题 很多时候我们需要用到el-input-number来限制输入框智能输入数字，例如价格之类的，但是用了e l-input-numer的时候把默认值设为空和null都不生效，默认的值仍然显示0 <el-input-number :controls="false" :precision="2" :min="0" :max="100000000" v-model="price" ></el-input-number> data(){ ret
el-input输入框使用oninput或onkeyup后，v-model双向绑定失效问题
admin_mvip的博客
04-20 3536
在输入中文触发oninput后，v-model绑定的值会被设成空字符串，这时候再输入数字，v-model绑定的值不会被赋值，一直为空。解决方法可以用blur手动给绑定的值赋值。 <el-input v-model="form.account" clearable placeholder="请输入手机号" onkeyup="value=value.replace(/[^\d]/g,'')" @blur="form.account = $event.target.valu.
通过js给el-input value赋值，v-model绑定值不同步问题
weixin_43861311的博客
10-26 6902
1.在页面上通过点击右侧，直接给input赋值，由于input不是固定是可新增的，结构是循环出来的，没想到其他好的方式可以确认是修改的哪个参数，因此直接js操作 2,通过blur事件获取到event template： <el-input v-model="item.value" size="mini" @blur="handleInputBlur" ></el-inp.
elementui el-input v-model绑定数值之后input不显示值
05-13
如果使用 `v-model` 绑定数值后，`el-input` 不显示值，可能有以下几种原因： 1. 检查绑定的值是否正确：确保 `v-model` 绑定的值是一个能够被修改的变量。 2. 检查是否给 `el-input` 组件设置了初始值：如果没有...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值