Vue中使用form表单提交刷新问题

vue中使用表单form默认提交行为是刷新一下，在这儿我们使用事件修饰符prevent来阻止form表单的默认行为

在@click后面跟上prevent 这样就可以阻止form表单默认刷新行为了

<input type="submit" value="提交" @click.prevent='had'>

案例如下

<!DOCTYPE html>
<html lang="en">
<body><div id="app"><form><div><span>个人简介：</span><textarea v-model='texts'></textarea></div><div><input type="submit" value="提交" @click.prevent='had'></div></form></div><script type="text/javascript" src="vue.js"></script><script type="text/javascript">/*表单基本操作*/var vm = new Vue({el: '#app',data: {texts: '个人介绍'},methods: {had: function(){console.log(this.texts)}}});</script>
</body>
</html>

结果如下：
这儿点击 “提交”按钮，就不在是刷新表单了，而是执行点击事件方法里面的操作了

Vue中使用form表单提交刷新问题相关推荐

React+ant中的Form表单的刷新
我们使用ant组件库的Form表单提交之后不刷新整个页面,表单中的内容有时候是不会刷新,如何解决这个问题? 首先定义一个[form]通过 Form.useForm 对表单数据域进行交互, const ...
laravel中的form表单提交
提交方法:form表单提交只能提交post 和get ,如果你想提交其他的提交方法,就要如图所示转载于:https://www.cnblogs.com/luxia/p/9001310.html
easyui复杂表单_EasyUI中实现form表单提交的示例分享
$('#form').form({ url : 'test/add.do', onSubmit : function() { parent.$.messager.progress({ title : ...
vue 添加完数据后刷新页面_vue form 表单提交后刷新页面的方法
最近做的项目中,有增删改表格功能,在操作后需要实时更新页面数据.下面可以这样解决. 1.在methods中定义好一个初始化渲染实例. 例如 lnitializationData(){//初始化页面数 ...
vue form表单提交动态数据
项目vue-cli搭建需求为:vue页面跳转至第三方的支付页面操作流程为:点击确认按钮时得到得到第三方网页的url和参数信息,以form表单的post方式提交尝试了N种方法,都不可以成功完成逻辑 ...
Vue 使用form表单提交问题
背景:公司的项目对接了一家第三方的支付机构,使用云闪付web移动端支付,对方要求form表单提交信息 1.一开始,使用接口使用Axios请求设置form格式提交 import axios from & ...
layui提交表单自动刷新_layui form表单提交后实现自动刷新
刚刚使用layui 来做东西,对这一切都不熟悉,使用一下form表单,但是,不能成功的使用. 问题: 1.提交表单,页面自动刷新. 出现这样的情况呢,搜索了一下是因为表单的提交按钮没有type类型.哪 ...
文件上传 java 完美,vue+java实现文件上传（excel等），会出现跨域问题，直接用form表单提交就不会有问题了（new FormData()）...
vue+java实现文件上传(excel等),会出现跨域问题,直接用form表单提交就不会有问题了(new FormData()) 地址:https://www.cnblogs.com/muscles ...
action无法传参数给html页面,HTML 解决form表单提交时，action url中参数无效问题
这篇文章主要为大家详细介绍了HTML 解决form表单提交时,action url中参数无效问题,具有一定的参考价值,可以用来参考一下. 感兴趣的小伙伴,下面一起跟随512笔记的小编两巴掌来看看吧! ...

Vue中使用form表单提交刷新问题

Vue中使用form表单提交刷新问题相关推荐

最新文章

热门文章