element el-input-number 加减失效或者只加减一次就失效

这篇具有很好参考价值的文章主要介绍了element el-input-number 加减失效或者只加减一次就失效。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

在项目中遇见使用element的计数器,只可加一次和减一次,之后加减失效的问题,change事件也没有执行。百度之后发现可能是数据层级过深,导致视图无法刷新,这里v-model绑定的对象下的一个数组,数组里的某一个对象的属性值。

知道原因之后就好解决了,可以使用forceUpdate强制触发update声明周期,迫使vue实例重新渲染

 <el-input-number
   class="ml10 mr10"
    style="width: 120px"
    v-model="conItem.num"
    controls-position="right"
    :min="1"
    :max="10000"
    @change="changeVal"
 ></el-input-number
changeVal() {
      this.$forceUpdate();//解决点击计数器失效问题
    },

扩展一下:

1.input框有时候会无法输入进去,也可以使用forceUpdate

2.去vue官网了解一下$set,由于JavaScript的限制,vue检测数组的变动也是有限制的,当数据双向绑定失败时,就要考虑绑定的方式是否错误了,对于数组的赋值,需要使用$set。文章来源地址https://www.toymoban.com/news/detail-729378.html

到了这里,关于element el-input-number 加减失效或者只加减一次就失效的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • el-input-number 失去焦点blur事件,

            最近遇到了个奇怪的需求,需要代码手动给数字输入框手动触发失焦事件;但是在看了 el-input-number 焦点事件部分的源码后,发现 el-input-number 只有获取焦点focus事件,却没有失去焦点的事件: 后来再阅读了 el-input-number的 template部分的源码后;发现el-input-number封装

    2024年02月13日
    浏览(44)
  • element ui el-input输入框type=number去掉上下箭头

    使用vue框架写法 如果是input标签type=number,将上述css代码中 ::v-deep 去掉即可

    2024年02月12日
    浏览(60)
  • 解决使用element ui时el-input的属性type=number,仍然可以输入e的问题。

    使用element ui时el-input的属性type=number,仍然可以输入e, 其他的中文特殊字符都不可以输入,但是只有e是可以输入的,原因是e也输入作为科学计数法的时候,e是可以被判定为数字的, 但是有些场景是需要把e这种情况屏蔽掉的,我们可以使用如下的方法。 在进行键盘事件输入

    2024年02月08日
    浏览(46)
  • 设置输入框el-input图标 / el-input表单只显示number

    第一种方法说明: prefix-icon图标位置在前面 suffix-icon图标位置在后面 el-icon-search 搜索小图标 el-icon-date 日期小图标 第二种方式是通过slot来插入 PS:

    2024年02月16日
    浏览(45)
  • uniapp中引用uView后,使用u-input标签的type=‘number‘在小程序失效

    uniapp中u–input报销金额标签只能输入数字,u-input微信小程序不生效 input标签中使用type=\\\'number失效,看了很多文档,说在小程序运行后,手机上可以跳出来数字键盘,尴尬的是,苹果机没任何反应,什么都能输入,根本没有限制只能输入数字和小数,所以用正则处理了一下,就

    2024年02月03日
    浏览(48)
  • vue+element-ui input输入框设置属性type为number去除右边的上下按键

    当 input type=number 时,去掉后面的上下按钮 1.全局样式改变: 2.在style中使用的是vue+element,通常写当前页面的样式时使用scoped,防止篡改其他页面样式,但是这样会发现上面的代码失效,此时需要使用/deep/去寻找 【定义样式】去除表框、去除上下箭头、去除滚轮事件 3.在sty

    2024年02月11日
    浏览(50)
  • element tree组件current-node-key 失效或者setCurrentKey失效问题解决方案

    在使用element-ui el-tree 组件时遇到设置默认高亮属性或方法不生效的问题,现在将解决方案贴出来: 首先先看html代码: 首先保证设置 node-key 属性为数据中的唯一值,可以是id,也可以是其他。 设置 ref=“treeSelect” 。 设置 :highlight-current=“true” 此属性表示设置选中项为高亮

    2024年02月11日
    浏览(37)
  • element el-select下拉框选择失效

    2023.1.11今天我学习了使用element el-select组件下拉框选择数据失效的原因以及解决办法。 如图:   当我已经选择启用状态的时候,然后点击停用状态没反应。 是因为在配置表单的过程中,重复使用了这个字段。 如: 就是在表单中重复使用了status这个字段,然后导致选择失效。

    2024年02月16日
    浏览(46)
  • Element VUE修改 el-input和el-select长度

     没有设置样式之前,采用默认样式,界面如下:  模拟代码如下  为了美观需要修改下样式,使文本框与下拉框的长度一致 第一种:添加style属性,采用行内样式修改长度  第二种:添加class属性,采用内部样式  stule标签中设置长度 第三种:找到element-ui.scss,采用外部样式

    2024年02月11日
    浏览(55)
  • element ui el-table分页多选功能失效

    编写 项目是遇到一个坑: selection-change :当选择项发生变化时会触发该事件(当分页切换时,选中的数据都会自动清空) 一、在el-table中 二、在el-table-column中 添加上述刷新重试即可

    2024年04月23日
    浏览(62)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包