zoukankan      html  css  js  c++  java
  • form表单button按钮,未成功跳转,自动刷新页面。

    问题描述

    • 在学习vue表单时,表单的提交按钮使用的是一个button标签,同时button也绑定了另外一个方法。该方法在浏览器的console中打印内容。在执行时,打印的内容一闪而过,表单页面也发生了刷新。
    <form >
    	{{ usrname}} ++ {{ psd }}
    	<input type="text" name="" v-model='usrname'>
    	<input type="text" name="" v-on:keyup.aaa='sub' v-model='psd'>
    	<button  @click='sub' >提交</button>  //此处button未设置type值是问题的关键
    </form>
    
     sub:function(){
    	console.log('123'); //打印123会一闪而过,同时form表单刷新.
    	}
    

    理论原因

    • 在ie中,button的默认type为button,而在其他浏览器中是submit.因此在点击该按钮时,会触发提交操作,并刷新表单页面。

    解决办法

    • 为button设置type值为button,则不会触发提交操作。若要提交则手动绑定触发方法。
    <form >
    	{{ usrname}} ++ {{ psd }}
    	<input type="text" name="" v-model='usrname'>
    	<input type="text" name="" v-on:keyup.aaa='sub' v-model='psd'>
    	<button  type='button'  @click='sub' >提交</button>  //在此处设置type即可
    </form>
    
  • 相关阅读:
    mysql 锁相关的视图(未整理)
    MYSQL的用户变量(@)和系统变量(@@)
    mysql杀死线程
    mysql 系统变量和session变量
    Oracle DB 移动数据
    MySQL数据库------常用函数
    练习-----查询
    练习建表
    课堂笔记总结
    数据库--------用代码来创建表
  • 原文地址:https://www.cnblogs.com/guojuboke/p/12313515.html
Copyright © 2011-2022 走看看