el-form中input输入框绑定v-on：change时点击enter会刷新整个页面问题

最新推荐文章于 2024-05-16 09:41:57 发布
最新推荐文章于 2024-05-16 09:41:57 发布
阅读量1.4k 收藏 2
点赞数
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44759289/article/details/107899809
版权

当我们使用elementUI中input时，会用到v-on:change事件，一般都是结合el-form表单使用的，但是这会出现一个问题，当我们输入之后点击enter键会重新刷新页面，所以我们要在el-form便签里加上 @submit.native.prevent 即可

<el-form size="medium"
                             ref="ComboSearch"
                             :model="ComboSearch"
                            >
                        <el-form-item>
                            <el-col style="width:180px;margin-left:10px;margin-right:10px;">
                                <el-input placeholder="输入关键字查询"
                                          prefix-icon="el-icon-search"
                                          v-model="ComboSearch.search"
                                          v-on:change="getItemComboList">
                                </el-input>
                            </el-col>
                       </el-form-item>
 </el-form>
写代码的小珊子
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue element-ui实现input输入框金额数字添加千分位
10-15
主要介绍了vue element-ui实现input输入框金额数字添加千分位,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
vue中el-input绑定键盘按键(按键修饰符)
10-15
主要介绍了vue中el-input绑定键盘按键(按键修饰符)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Web前端-Vue ElementUI el-input组件绑定点击事件
热门推荐
MinggeQingchun的博客
12-22 2万+
1、element中el-input组件事件 <el-input v-model="value" v-on:change="handleChange"></el-input> <el-input v-model="value" @change="handleChange"></el-input> <el-input v-model="value" v-on:input="handleChange"></el-input> &lt
element中input的change事件
weixin_43196880的博客
08-05 3350
element中input的change事件是移除焦点才触发： <el-input placeholder=“同事姓名或账号” suffix-icon=“el-icon-search” v-model=“keyword” @change=“handlerPageNo” style=“width: 180px;”> 想要变成输入就出发： 解决： 使用@input 但是如果想要输入完成以后使用回车开始搜索的话，就使用@keyup.native.enter ...
vue :on-change 父与子之间的传递
最新发布
果酱味奶糖的博客
05-16 364
在这个例子中，子组件有一个input元素，当input的值改变时，会触发input事件，然后在updateValue方法中使用$emit触发一个自定义的。事件，并将新值作为参数传递。父组件通过@change监听这个事件，并在handleChange方法中处理接收到的值。在Vue中，父组件可以通过v-on或@来监听子组件触发的事件，并在子组件中通过$emit来触发事件。
onchange事件和input事件
lyc2786161648的博客
01-19 3267
本文转载处：https://www.cnblogs.com/xuzhudong/p/8630610.html 1.， input输入框的onchange事件，要在 input 失去焦点的时候才会触发； 在输入框内容变化的时候不会触发change，当鼠标在其他地方点一下才会触发； onchange 事件也可用于单选框与复选框改变后触发的事件。 demo如下： &lt;script&gt; f...
即时反应的input和propertychange方法
a15980755772的博客
12-06 634
在web开发中，我们有时会需要动态监听输入框值的变化，当使用onkeydown、onkeypress、onkeyup作为监听事件时，会发现一些复制粘贴等操作用不了，同时，在处理组合快键键的时候也很麻烦。这时候我们需要更专业的解决方案：HTML5标准事件oninput、onchange和IE专属的事件properchange。 1.oninput&onchange： oninp...
jquery 防止change事件每次要刷新
gaokcl的博客
09-25 1653
$('#xxx').on('change', function() { success:  $("#myform").ajaxSubmit(options);             $(this).val('');// 保证change事件正常触发（选择同一张图片不会触发change事件）             //为了防止刷新             return fals
【Vue】【杂碎】v-on:change = “methods()“和v-on:change = “methods“的区别
qq_25218219的博客
03-28 421
而在第二行代码中，函数名 “upload_json” 后跟了一对括号，意味着该函数在绑定 v-on:change 事件时就会被调用。这表示在 input 元素的 change 事件被触发时，Vue.js 框架会先执行绑定的事件处理函数，然后才调用 “upload_json” 函数。在第一行代码中，v-on:change 属性所绑定的事件处理函数的名称为 “upload_json”，没有后跟一对括号。因此，第一个代码块中的 upload_json 函数不需要自己调用，而是由 Vue.js 框架自动调用；
Vue循环中多个input绑定指定v-model实例
10-14
在Vue.js中，`v-model`是一个非常强大的特性，它实现了视图与数据的双向绑定，使得我们在处理用户输入时能轻松地获取和更新数据。当涉及到在循环中使用`v-model`时，通常是为了创建多个类似的表单元素，如在列表或...
vue:el-input输入时限制输入的类型操作
10-15
主要介绍了vue:el-input输入时限制输入的类型操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Element Select 选择器支持多选时 v-on:change 无效
qq_35821469的博客
06-07 266
Element 下拉框支持多选时，v-on:change 无效。
表单属性改变时触发事件（oninput,onpropertychange,onchange）
六轩天地
05-07 5792
oninput,onpropertychange,onchange的用法说明： 1.onchange触发事件必须满足两个条件：    a）当前对象属性改变，并且是由键盘或鼠标事件激发的（脚本触发无效）    b）当前对象失去焦点(onblur)； 2.onpropertychange的话，只要当前对象属性发生改变，都会触发事件，但是它是IE专属的； 3.oninput是onprope
select被select2插件美化了，那么如何触发原始select元素上v-on:change=“xxx”中的xxx方法
舒碧的博客
05-31 2462
vue框架里，select用了select2插件后，v-model失效，取不了值，打算用onchange获取value再赋值，又因为插件问题，onchange又失效了。 唯有一下方案解决，在调用插件时候，回调函数获取value值，再赋值。曲线救国！ ...
el-input限制只能输入数字（开发小记）
Master_Tang的博客
01-05 3730
输入框中限制通常有三种处理方法 第一种：设置type属性（不推荐） 设置type属性为number，text等等，此方法输入框的后面会有不必要样式出现 <el-input type="number"></el-input> 第二种：在属性中添加onkeyup或者oninput进行正则判断 onkeyup，oninput，onchange各有好坏，在这里，推荐onkeyup，在要求不是太高的系统中可以这样使用 <el-input v-model="fo
element-ui input @change事件中保留默认参数情况下并传入自定义参数
WaiteZQ的博客
04-06 1648
elementUI @chang事件保留默认值并传入自定义参数
Vue系列(五)之常用指令v-on
安妍妍的博客
12-30 1478
v-on指令缩写用法修饰符stopprevent其它 缩写 v-on指令的缩写为：@，通常缩写用的较多。 用法 v-on api 参数是event事件，v-on:click或@click；v-on:change或@change等 <button @click="click">click</button> <select @change="change"> ...
如何给多个input框绑定同一个change事件
魂断@蓝桥的博客
01-29 3016
给表单控件设置name属性 初始化，state中用表单的name值为属性用于绑定对应input框 给对应的input框绑定value值 通过e.target.name获取当前操作的input框的name值 给对应的input框赋值 代码如下： import React from 'react' export default class App extends React.Component { state = { name: '', password: '' } on.
vue 点击确认禁用el-form中所有el-input输入框
05-10
可以通过遍历表单中所有的 input 组件，设置它们的 disabled 属性来实现禁用。具体实现代码如下： ```html <template> <el-form ref="form"> <el-form-item label="用户名"> <el-input v-model="username"></el-input> </el-form-item> <el-form-item label="密码"> <el-input v-model="password"></el-input> </el-form-item> </el-form> <el-button type="primary" @click="disableInputs">禁用输入框</el-button> </template> <script> export default { data() { return { username: '', password: '' } }, methods: { disableInputs() { const inputs = this.$refs.form.$el.querySelectorAll('input') inputs.forEach(input => { input.disabled = true }) } } } </script> ``` 上面的代码中，我们首先使用 `this.$refs.form.$el` 获取到表单元素的 DOM 对象，然后通过 `querySelectorAll` 方法获取到所有的 input 元素。最后遍历这些元素，设置它们的 `disabled` 属性为 `true` 即可。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值