iview的input输入框修改输入值后输入框中的值不更新的问题

最新推荐文章于 2023-11-22 14:58:46 发布
最新推荐文章于 2023-11-22 14:58:46 发布
阅读量557 收藏
点赞数
分类专栏： vue 文章标签： view design 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38157825/article/details/133944625
版权 
<Input
  v-model.trim="fastSearch"
  type="text"
   placeholder="查询"
   @input="fastSearchInput"
 />

  methods: {
    fastSearchInput(e) {
      // this.$nextTick必要
      this.$nextTick(() => {
        this.fastSearch = e.replace(/\s\s+/g, ' '); // 多个空格保留一个空格
      })
    },
   }
前端开心果
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue中使用iview自定义验证关键词输入框问题及解决方法
12-02
一、验证需求      对应配置的关键词输入框，验证要求如下：     1、总字数不能超过7000个；     2、去除配置的关键词特殊符号，得到的关键词组数不能超过300；(如：aaa&(bbb|ccc)|(!ddd|eee)),去掉特殊符号，有5组)     3、单个关键词长度不能超过20；(如：aaaaa&(bbb|ccc))，如果aaaaa长度超过20则提示) 二、解决方法      在关键词输入对应的FormItem中加入一个prop属性，作为验证字段使用；注意该FormItem是包含于Form的； form表单中添加rules验证 由于iview对空和总长度可以直接定义验证规
el-input-number直接在输入框输入内容v-model的值不会跟着改变
郝峰vip的博客
04-21 3208
前言 前提是element-ui版本为2.15.1及以下版本，因为说不定哪天element就会更新，解决这个问题 最近在开发项目中，有一个需求是在el-input-number组件中直接输入值，然后离开鼠标直接mouseenter其他的button,这个时候要获取v-model的值，发现v-model的值并不会改变，于是就开始折腾，查elementui的issure发现是因为el-input-number在封装时并没有将直接输入的值赋值给v-model,然后自己细想一下使用@keyup事件把输进去的值
iview InputNumber中@on-change事件不生效或偶尔生效问题
weixin_43735788的博客
05-22 5336
先看下过程 <InputNumber v-model="num" @on-change="numChange"></InputNumber> data () { return { num: 0, num1: 100 } } 错误的写法 此时你会发现输入框内的值在大于100时并没有变成100 methods: { numChange () { if...
vue表单修改值后页面输入框中的没有更新（表单的强制刷新）
qq_38143787的博客
06-09 6217
有的时候我们变化data内的内容，console.log打印的时候是显示已经变化了的，但并没有渲染到界面上去。受 ES5 的限制，Vue.js 不能检测到对象属性的添加或删除。因为 Vue.js 在初始化实例时将属性转为 getter/setter，所以属性必须在 data 对象上才能让 Vue.js 转换它，才能让它是响应的。 深入响应式原理 1.$set()方法重新渲染 this.$set(this.student,"age", 24) 2.深拷贝 let name2 = JSON.parse(JSO
VUE绑定数据未更新？
tangbinflash的专栏
02-08 1313
VUE绑定 （1）HTML标签绑定数据源： <div id="DIV_VUE"> {{a}} </div> （2）JS新建VUE对象： var data_vue={a:"1",b:"2"}; var myVue = new Vue({ el: "#DIV_VUE", data: data_vue }); 现象： （1）一般情况：修改数据源对象字段： data_vue.a=123; 结果：div显示从1变成了123 （2）特殊情
el-input-number直接在输入框输入内容v-model的值不会跟着改变 问题
小猪的博客
07-16 2686
有一个需求就是，只能输入一个大于0并且是0.5的倍数两位小数，使用elemnt ui 的inputNumer控件，但是使用的时候添加了属性step和precision两个属性，问题就来了，输入了一个小数值，在判断是否是0.5的倍数时，修改值v-mode得不到更新 于是乎 解决办法： <el-input-number @change="priceChange(dataForm.price)" v-model="dataForm.price" :step='0.5'
更改input标签文本框中显示的内容
G_66_hero的博客
04-07 3359
方式一：通过标签id的形式更改 以猜数字游戏为例进行代码的演示。 实例代码： 运行结果：
解决vue项目input输入框双向绑定数据不实时生效问题
11-20
input type=”text” maxlength=”11″ placeholder=”请输入联系人电话” v-model=”form.phone” /> 这样的输入框，绑定的是data中的form对象上的phone字段。 在mounted钩子函数里边写： this.form.phone = ...
iview数字输入框再封装（4.0.0以上版本）
11-24
封装了一下iview的数字输入框 封装内容： 1.添加聚焦功能 2.设置精度的情况下，避免输入时实时格式化精度，只有在焦点离开后格式化精度【offRyStyle控制功能开关】 3.添加设置数字居右显示【textAlign】 4.默认设置...
Vue基于iview实现登录密码的显示与隐藏功能
10-15
主要介绍了Vue基于iview实现登录密码的显示与隐藏功能,本文通过截图实例代码说明给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
解决Vue中表单输入框v-model双向绑定后数据不显示的问题
jattxgt的博客
11-22 4421
解决Vue中表单输入框v-model双向绑定后数据不显示的问题
input框 属性type = number 如何让这个input框 只可以点击箭头改变值 不可以直接输入数值
最新发布
weixin_44112620的博客
11-22 154
input框属性type=number 如何让input框只可以点击箭头改变value 不可以直接输入改变
tkwebview2使用tkinter输入框失效的解决方法
tinga_kilin的博客
08-26 1170
tkwebview2使用tkinter文本问题的解决建议
js中拼接input在页面中不随输入的数据而变化的解决办法
qq3892997的博客
12-17 672
原文地址（原文还有一种复杂解决办法）：input文本框的value属性在页面中不随输入的数据而变化 - QiaoZhi - 博客园 页面中input修改后浏览器按F12时html还是显示原来的值： 解决办法： <input type="number" name="count" oninput="if(this.value>10) value=10" value ="10" onchange="tempSaveInput(this)"> function tempSave
vue项目中input框修改时页面数值随之改变的bug
前端职场小白_炜晨科技的博客
08-18 904
点击click按钮时数值随之改变的bug,改变数值(例如input框中的文字),页面也会随之改变,因为v-model双向绑定的原因。data中定义一个值,用深拷贝方法,将父组件中传过来的值,赋值给新值,dom层v-model的值也需改变result.name等等。...
vue输入框改变后没反应，等下一个输入框值改变才会改变
zhengyun1568的博客
10-19 1456
原文链接:https://www.cnblogs.com/huanhuan55/p/12302333.html <el-input v-model="student.name"></el-input> export default { data () { return { student:{} } }, methods: { update () { this.student.name='莉莉丝' }
vue3 el-dialog中的input无法更新的问题
JeallyBean的博客
10-24 2051
vue3开发中的el-dialog中的input输入失效，无法更新
【vue】el-input文本框v-model数据改变时不刷新的问题
王佑辉的博客
07-30 9860
1.问题说明 1.在数组循环页面中，改变数组中某个底层的属性，对应的el-input所绑定的v-model的值改变后，el-input内容不更新 2.问题解决 1.可以在赋值的结尾加上this.$forceUpdate()强制更新
vue uniapp input输入值后,数据不更新问题
m0_61149511的博客
09-16 2954
如果遇到input v-model 绑定的数据 需要做处理的话 用监听效果好像不太理想 这个时候可以用input事件
vue+iview ui库table组件中添加日期选择器和input输入框
05-31
在iview的Table组件中添加日期选择器和Input输入框可以通过iview的template模板语法来实现，可以参考以下代码： ```html <template> <Table :columns="columns" :data="data"> <template slot-scope="{row, column}"> <div v-if="column.key === 'date'"> <DatePicker :value="row[column.key]" type="date" @on-change="onDateChange(row, column.key, $event)" /> </div> <div v-else-if="column.key === 'input'"> <Input v-model="row[column.key]" @on-change="onInputChange(row, column.key, $event.target.value)" /> </div> <div v-else> {{ row[column.key] }} </div> </template> </Table> </template> <script> import { Table, DatePicker, Input } from 'view-design' export default { components: { Table, DatePicker, Input }, data() { return { columns: [ { title: '日期', key: 'date' }, { title: '内容', key: 'input' }, { title: '备注', key: 'remark' } ], data: [ { date: '2021-08-01', input: '示例1', remark: '备注1' }, { date: '2021-08-02', input: '示例2', remark: '备注2' } ] } }, methods: { onDateChange(row, key, value) { row[key] = value }, onInputChange(row, key, value) { row[key] = value } } } </script> ``` 这里使用iview的DatePicker组件来选择日期，使用Input组件来输入内容，通过在Table组件的template插槽中添加DatePicker和Input组件，可以将选择器和输入框添加到表格的每一行中。 注意，在onDateChange和onInputChange方法中，需要将选择器选中的日期值或输入框输入的值赋值给对应的行数据属性，这样才能实现选择器和输入框的同步更新。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值