Vue：输入框赋值后无法再编辑输入框的值

最新推荐文章于 2024-08-01 15:17:49 发布
最新推荐文章于 2024-08-01 15:17:49 发布
阅读量5.2k 收藏 2
点赞数 5
分类专栏： vue 文章标签： vue 渲染
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40841731/article/details/103477463
版权

可从vue官方文档中找到一句话：

根据官方文档定义：如果在实例创建之后添加新的属性到实例上，它不会触发视图更新

可以发现， 引起这个问题的原因可能是你，在data中没有定义这个属性，导致赋值可以赋上，但是再次修改的时候，修改不了，也删除不了。因为数据是双向绑定的：vue底层在渲染dom,然后再展示数据，然后编辑的时候，vue底层，找不到这个属性，那肯定编辑不了了

 

 

System.out.print
关注
专栏目录
elementUi 表格双击编辑 输入框赋值后不可编辑的坑
qq_43593142的博客
06-10 2788
##表格双击编辑 ###代码 ####html <el-table id="table_1" :row-class-name="tableRowClassName_1" :data="tableData_1" :summary-method="getSummaries" show-summary highlight-current-row @cell-click="cellClick" style="width: 100%;"> <!--
vue 简单自动补全的输入框的示例
08-27
Vue 简单自动补全的输入框示例 本示例主要介绍了如何使用 Vue 实现简单的自动补全输入框。自动补全输入框是指在用户输入信息时，系统根据用户输入的信息，提供可能的选项供用户选择。本示例使用 Vue 框架实现了一个...
a-checkbox-group 赋值后不能点击问题
hy_ethel的博客
10-15 3107
问题： 编辑时，多选框会默认赋值，在重新选择后，打印的数据为新数据，但页面上选值没有变。 <a-checkbox-group v-model="data.channel" :options="plainOptions" @change="onCheckboxChange" /> 如图： 解决： v-model 是二级字段，修改 v-model 为一级字段可解决，即 v-model="data.channel" 修改为 v-model="channel" ，然后在 onCheckbo
input赋值后无法编辑问题
wz990223的博客
03-05 493
通过上网查阅资料后，发现本来没有的属性给它赋值会导致此属性没有getter和setter方法，所以vue无法动态修改。 解决办法就是： 使用vue的全局api方法this.$set(data, property, value) data为要修改的对象，property为要添加的属性，value就是这个属性的值 _this.form.userid=res.data.recid替换成 _this.$set(_this.form,'userid',res.data.recid) ...
Vue3 form表单赋值后，input输入框无法输入
最新发布
qq_39691676的博客
08-01 405
原因: 使用reactive生成的响应式数据，在直接赋值时把响应式数据给替换为了普通数据了，导致无法监听数据的变化。Form表单及JS中的使用都需要 “paramr.formUser” 进行调用。
给input框赋值成功后input框不能进行编辑
tonysh_zds的博客
06-22 297
从route获取参数，给query对象赋值后，el-input不能不能进行编辑 原因在于在Vue实例创建时，obj.b并未声明，因此就没有被Vue转换为响应式的属性，自然就不会触发视图的更新，这时就需要使用Vue的全局api $set()： $set()方法相当于手动的去把obj.b处理成一个响应式的属性，此时视图也会跟着改变了： created() { this.crud.url = 'api/dataAwardcertificate' this.getRouteQueryCondition
vue在表单中给文本框赋值空值后，文本框不可编辑问题
其乐大人的博客
04-02 1451
处理问题时，发现给文本框赋值 model = '' 时，文本框不可编辑，点进别的文本框或点击了其他元素时才看到之前输入的一些东西，我的解决方法： 譬如对象为 let obj = { name: 'xxxx' } this.$set(obj,'name','要赋值的内容'); 本篇博客用于记录工作中遇到的问题，如有问题，请指正。 ...
VUE的input框赋值后无法进行编辑
pany的博客
05-14 1743
问题情况 : data中有定义对应字段,input框也进行绑定对了v-model 但进行赋值后,input输入框无法进行操作 原因: 空input框进行赋值后,不存在setter和getter方法,导致无法实现双向绑定 解决: 使用vue的全局方法: this.$set(data, property, value) data为要修改的对象，property为要添加的属性，value就是这个属性的值 例如: this.$set(this.form, "contactPersonCardId", idCard)
vue 中input无法输入原因
qq_25239049的博客
05-20 4576
没有设定处使值 v-model 动态循环绑定值时需要使用@input="change(KaTeX parse error: Expected '}', got 'EOF' at end of input: … change(){this.forceUpdate()} 强制更新视图
解决vue项目input输入框双向绑定数据不实时生效问题
11-20
我就废话不多说了，大家还是直接看代码吧...这样在页面上时候不会随着输入框值改变而改变。 解决方法如下： this.$set(this.form,”phone”,this.$route.query.mobile) 或者绑定到data里边的一个字符串，也是可以解决
vue实现短信验证码输入框
10-15
同时，还需要定义一个数组来保存每个输入框的id，以便在输入完成后能够移动焦点到下一个未输入的输入框。 在watchers中，我们可以设置一个监视器来监听验证码数组的变化。当输入验证码时，监视器会被触发。首先，...
vue综合问题归纳-------input框赋值后不能进行编辑
weixin_45176415的博客
02-10 2634
项目场景： 项目场景：前端实现查看编辑功能的时候会出现， input框赋值后input框不能进行编辑,编辑之后自动取消，验证无法进行取消 问题描述： 数据代码： <el-textarea v-model="drawerForm.msg" placeholder="请输入功能描述" :rows="3" allowClear
Vue input手动赋值后无法修改问题
weixin_44804557的博客
05-21 2580
当获取数据之后，手动赋值给input，会出现渲染成功，能读取数据，但是无法修改情况。 解决方法1：this.$set() Vue中this.$set的用法 // 数组：第一个参数是要修改的数组, 第二个值是修改的下标或字段,第三个是要修改成什么值 // 对象：第一个参数是要修改的对象, 第二个值是修改属性字段,第三个是要修改成什么值 Vue.set( target, propertyName/index, value ) 参数 {Object | Array} target {string | numbe
element通过数据请求赋值到输入框,输入框内容无法编辑更改
weixin_49855711的博客
10-21 388
网上看还是挺多人遇到这个问题的，原因是你没有在data中声明 data () { return { //在这里声明你不能编辑的变量 name: '' } }
vue+element-ui 表单的 el-input 第二次修改时无法输入
Akatsuki233的博客
07-10 3833
由于新增跟修改用的是同一个弹窗，所以当修改提交时，要清空 input 框内的值。 提交时不能只把 父对象formData 设置为空对象。即this.formData = {} 是错误的 正确的写法为this.formData = {name: '' } 原因：如果把this.formData设置为空，this.formData.name 就是 undefined，此时就会赋值不上。 ...
vue input赋值之后不能输入
liu_chenglong的博客
05-20 3293
vue input赋值之后不能输入，Vue中input框手动赋值成功却无法在编辑input框的值？？
vue .input赋值之后input框无法输入，或者和其他input框错位，校验延迟
weixin_42575505的博客
01-10 2002
如果在 Vue 中使用 v-model 指令给 input 框赋值之后，input 框无法输入或者和其他 input 框错位，有可能是因为 v-model 指令在给 input 框赋值之前导致了错误。 这种情况常常发生在在父组件和子组件之间传递数据时，由于数据在父组件和子组件之间的渲染延迟导致的。 要解决这个问题，可以使用 v-model.lazy 指令，或者在赋值时使用 $nextTick 方法...
vue自定义指令——input输入类型限制（数字、浮点、整数、英文等），解决中文输入法双向绑定失效问题
pixle的博客
11-12 6129
实现一个vue自定义指令——输入框（input,el-input）输入内容类型限制，解决中文输入法双向绑定失效问题，多种类型支持，数字类型，浮点类型、英文类型、整数类型、四则运算等。
【vue】element form/input/select 组件 赋值后无法编辑的问题
Hypnotic0624的博客
12-08 2395
今天在使用element form组件时，想创建一个修改的dialog ，赋上当前值再修改传后台 开始代码如下 HTML部分： <el-dialog :visible.sync="updateDialogVisible" title="编辑任务" width="50%"> <el-form :model="updateForm" ref="updateForm"> <el-row> <el-form-item lab
vue MAC输入框
10-18
你可以使用 Vue 的 v-model 指令来实现一个 MAC 地址输入框。具体实现方式如下： ... ...最后，我们将格式化后的 MAC 地址重新赋值给 macAddress，这样就可以在输入框中显示格式化后的 MAC 地址了。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值