精华内容
下载资源
问答
  • 需求,需要使用原生表单提交并待参跳转到对应页面。在网上查了一些,有些是在form表单添加 @submit.prevent="submit"但是没有成功,在点击注册时候是函数都没有进去,同时还有一个问题,因为采用是element...

    新的需求,需要使用原生表单提交并待参跳转到对应的页面。

    在网上查了一些,有些是在form表单添加 @submit.prevent="submit"但是没有成功,在点击注册的时候是函数都没有进去,同时还有一个问题,因为采用的是element ui 框架,select选择器选取内容无法进行获取,获取到的都是label。实际上要提交的是key,但是key是vue的方法,所以后面就采用了其他的方式。

    整体的思路就是:先阻止form表单提交,阻止之后在把key的值直接赋值到input上,这样就能够获取到key并发送给后台。

    如果要使用element UI上面的form提交没有找到方法,elementUI 在select表单的属性里面有一个属性是value-key,使用后发现也没有用,提交的内容一直都是input里面值。

    具体实现就是,使用原生submit方法进行手动提交,点击后使用document.getElementById进行赋值,如果要做验证的话,就需要阻止提交方法,JavaScript有两种提交方式,1、return false;2、preventDefault,考虑到兼容问题的可以使用returnValue来进行组织;

    第一种方式试过,不起作用,第二种方式可以解决。

    method="post" label-position="left" label-width="0px" class="demo-ruleForm login-container">

    系统注册

    * 请输入用户名

    style="width:100%;">

    * 请选择部门

    使用第二种方式解决

    doSubmit() {

    var users= document.getElementById('users')

    var dept = document.getElementById('dept')

    if (users.value =="" && dept.value =="") {

    this.userNull = true

    this.deptNull = true

    window.event.returnValue = false

    } else if (dept.value =="") {

    this.userNull = false

    this.deptNull = true

    window.event.returnValue = false

    } else if (users.value =="") {

    this.userNull = true

    this.deptNull = false

    window.event.returnValue = false

    }else{

    this.userNull = false

    this.deptNull = false

    dept.value = this.value.option

    }

    }

    展开全文
  • 今天小编就为大家分享一篇vue 解决form表单提交但不跳转页面问题,具有很好参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • vue的form表单提交成功后置空

    千次阅读 2019-08-27 10:02:02
    vue的form表单提交成功后置空 form表单 说明 :form表单加上属性值 ref=“form” 点击事件加入 roleManager.$refs[‘form’].resetFields() (这里的roleManager指的是当前即this) ...

    vue的form表单在提交成功后置空

    form表单

    说明 :form表单加上属性值 ref=“form”
    点击事件加入 roleManager.$refs[‘form’].resetFields() (这里的roleManager指的是当前即this)

    展开全文
  • 在初学习Laravel过程中,看过教程肯定都有登陆这个表单提交操作,当提交错误时候,系统会返回$errors,而我们可以根据$errors来显示在input框下面。但是,在写vuejs时候,我就感觉自己比较混乱,就是直接...

    在初学习Laravel的过程中,看过的教程肯定都有登陆这个表单提交操作,当提交错误的时候,系统会返回$errors,而我们可以根据$errors来显示在input框下面。

    但是,在写vuejs的时候,我就感觉自己比较的混乱,就是直接判断status,如果不为1,则提取发送的json数据中的msg,也就是自己定义的msg。

    这几天在看Laracast的Vue2教程中的Object-Oriented Forms给了我这个初学者很好的一个解答。

    create.blade.php

    Name

    Description

    Save

    在这里面,介绍几个重点

    @submit.prevent="onSubmit"调用,我们阻止了表单提交,调用了我们自有的onSubmit函数。

    @keydown="form.errors.clear($event.target.name)",这个用于输入时清空input框地下的错误提示

    app.js

    这边分为3个部分,Vue的代码,Form Class,Errors Class

    new Vue({

    el: '#app',

    data: {

    form: new Form({

    name: '',

    description:'',

    }),

    },

    methods: {

    onSubmit() {

    this.form.post("/projects")

    .then(data => {

    alert(data.message);

    })

    .catch(errors => {

    console.log(errors);

    });

    },

    }

    });

    我们通过onSubmit调用Form的post函数,可以直接将Form表单中的参数name和description发送到"/projects"中

    Form Class

    class Form {

    constructor(data) {

    this.originalData = data;

    for (let field in data) {

    this[field] = data[field];

    }

    this.errors = new Errors();

    }

    data() {

    let data = {};

    for (let property in this.originalData) {

    data[property] = this[property];

    }

    return data;

    }

    reset() {

    for (let field in this.originalData)

    {

    this[field] = '';

    }

    this.errors.clear();

    }

    submit(requestType,url) {

    return new Promise((resolve,reject) => {

    axios[requestType](url,this.data())

    .then(response => {

    this.onSuccess(response.data);

    resolve(response.data);

    })

    .catch(error => {

    this.onFail(error.response.data.errors);

    reject(error.response.data.errors);

    });

    });

    }

    onSuccess(data) {

    this.reset();

    }

    onFail(errors) {

    this.errors.record(errors)

    }

    post(url) {

    return this.submit('post',url);

    }

    }

    constructor为初始化函数,其中this.originalData用于遍历访问field(即name,description).通过for循环赋值,我们可以知道form里面的数据就变成了以下这种情况

    this.name = data.name

    this.description = data.description

    data函数为返回form表单中的数据,data[property] = this[property];其实就是上面这个的反向。

    reset函数清空数值,当发布成功后,清空input数值。

    submit函数用于提交表单,Promise用来传递异步操作的消息,具体是为了让我们form.post函数能继续调用.then和.catch.

    Errors Class

    class Errors {

    constructor() {

    this.errors = {};

    }

    get(field) {

    if (this.errors[field])

    {

    return this.errors[field][0];

    }

    }

    has(field) {

    return this.errors.hasOwnProperty(field);

    }

    any() {

    return Object.keys(this.errors).length > 0;

    }

    record(errors) {

    this.errors = errors;

    }

    clear(field) {

    if (field) {

    delete this.errors[field];

    return;

    }

    this.errors = {};

    }

    }

    errors类通过record将form提交返回的错误信息存入其中,这样我们就可以通过操作这个类,轻松的访问到错误信息。

    本作品采用《CC 协议》,转载必须注明作者和本文链接

    一入php深似海,从此c++是路人

    展开全文
  • 今天小编就为大家分享一篇vue form 表单提交后刷新页面方法,具有很好参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 最近做项目中,有增删改表格功能,在操作后需要实时更新页面数据。下面可以这样解决。1、在methods中 定义好一个初始化渲染实例。例如lnitializationData(){//初始化页面数据this.$http.get("/permit/specific", {...

    最近做的项目中,有增删改表格功能,在操作后需要实时更新页面数据。下面可以这样解决。

    1、在methods中 定义好一个初始化渲染实例。

    例如

    lnitializationData(){//初始化页面数据

    this.$http.get("/permit/specific", {

    params: {

    page: this.localPage,

    size: this.msg.pagNumber,

    }

    },

    {emulateJSON: true}

    ).then((response) => {

    this.msg.pagTotal = response.data.data.totalElements;

    this.systManage = response.data.data.content;

    })

    2、在你的添加方法中调用这个实例,即可实现实时更新。

    例如

    add: function (index) { //添加通行证细类

    this.dialogFormVisible=false

    this.$http.post("/permit/specific", this.form //通行证类型

    , {

    headers: {token: this.tokenVal},

    }

    ).then((response) => {

    this.lnitializationData()//请求成功后调用初始化函数,vue会自动更新dmo

    })

    },

    以上这篇vue form 表单提交后刷新页面的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

    展开全文
  • vue form表单数据提交

    万次阅读 多人点赞 2019-07-28 19:21:38
    利用v-model能比较便捷地上传用户信息数据,不用一个个参数地拼接。直接在data根据要传字段定义一个对象, 再利用双向绑定得到值。下面写了传json格式跟formData格式两种...form action=""> <input ty...
  • 使用:ant design vue问题:form表单提交时,只在控制台输出error,输入框不标红也没提示打开一个弹窗 弹窗是表单验证是这么写rules: { name: { rules: [ { required: true, message: '请输入名称' }, { validator: ...
  • vue form表单提交动态数据

    千次阅读 2019-07-18 18:04:53
    尝试了N种方法,都不可以成功完成逻辑,最终是jQuery动态创建form表单提交的。 最终成功代码: //生成from表单方法 放在mounted 里,在button事件里执行,注意button不要为submit,数据在别方法里,这...
  • 主要介绍了Vue form 表单提交+ajax异步请求+分页效果,需要朋友可以参考下
  • vue.js form表单提交

    2018-12-21 18:06:00
    form表单提交是前端经常要用到的,vue.js的form提交只是比普通的多加几个东西 其他都是大同小异的 上代码吧! 主要就是v-model的用法啦 <form action="" method="post" enctype="multipart/form-data"> ...
  • 最近做项目中,有增删改表格功能,在操作后需要实时更新页面数据。下面可以这样解决。1、在methods中 定义好一个初始化渲染实例。例如lnitializationData(){//初始化页面数据this.$http.get("/permit/specific", {...
  • Vue中使用form表单提交刷新问题

    千次阅读 2020-05-13 12:52:21
    vue中使用表单form默认提交行为是刷新一下,在这儿我们使用事件修饰符prevent来阻止form表单的默认行为 在@click后面跟上prevent 这样就可以阻止form表单默认刷新行为了 <input type="submit" value="提交" @...
  • Vue.js form 表单提交后刷新页面方法发布于 2020-2-26|复制链接分享一篇关于vue form 表单提交后刷新页面方法,具有很好参考价值,希望对大家有所帮助。一起跟随小妖过来看看吧最近做项目中,有增删改表格...
  • 使用:ant design vue问题:form表单提交时,只在控制台输出error,输入框不标红也没提示打开一个弹窗 弹窗是表单验证是这么写rules: { name: { rules: [ { required: true, message: '请输入名称' }, { validator: ...
  • 在登录页面,在form表单中,为了敲击回车可以自动提交,在elementui<el-button>控件加入了native-type="submit"属性。虽然可以实现自动提交,但是,每次都需要登录两次才行。而第一登录,从Chrome中可以看到...
  • vue form表单提交但不跳转页面

    千次阅读 2019-03-11 16:48:28
    来设置提交时执行函数,并阻止页面跳转: &amp;lt;form id=&quot;msgForm&quot; action=&quot;http://api.clustar.ai/visitorinfo/&quot; method=&quot;post&quot; @submit.prevent=...
  • vue form 表单提交后刷新页面

    万次阅读 2018-01-15 14:00:15
    最近做项目中,有增删改表格功能,在操作后需要实时更新页面数据。下面可以这样解决。 1。在methods中 定义好一个初始化渲染实例。例如 lnitializationData(){//初始化页面数据 this.$http.get("/permit/...
  • @[TOC]欢迎来到 vue-form 表单提交演示间, 你有更好建议,请告知楼主额!1. 客户端 htmlTitle欢迎来到 vue-form 表单提交演示间, 你有更好建议,请告知楼主额!boxnewrankdesctitle{{v.box}}{{v.new}}{{v.rank}}...
  • 情况一:点击button时,触发默认行为用户名placeholder="请输入用户名或手机号码" v-model="bossUsername">密码placeholder="请输入密码" v-model=...{{logging?'正在登录...':'登录'}}在使用了vuevue-ro...
  • 最近做项目中,有增删改表格功能,在操作后需要实时更新页面数据。下面可以这样解决。1、在methods中 定义好一个初始化渲染实例。例如lnitializationData(){//初始化页面数据this.$http.get("/permit/specific", {...
  • 在JSP页面开发中,我们常常会用到form表单做数据提交,由于以前一直只是使用form表单提交单个对象,只要表单文本域name值和接收对象属性名一致,那么传值就没有什么问题。不过,在前几天开发任务中,遇到了...
  • vue表单form提交阻止跳转页面

    千次阅读 2020-04-09 11:59:17
    直接使用form的submit提交,页面会跳转,需要使用jquery-form阻止跳转 <form id="uploadForm" method="post" v-show="false" enctype="multipart/form-data" onsubmit="return false"> <input type=...
  • 有时候我们在用vue项目时,肯定会遇到这样问题,业务中...很简单,vue@submit.prevent属性可以帮我们实现这个功能,当我们点击提交按钮时,表单并不会提交,而是会触发绑定函数,就像下边onSubmith函数一样
  • 欢迎来到 vue-form 表单提交演示间, 你有更好建议,请告知楼主额!1. 客户端 htmlTitle欢迎来到 vue-form 表单提交演示间, 你有更好建议,请告知楼主额!boxnewrankdesctitle{{v.box}}{{v.new}}{{v.rank}}{{v....
  • vue 封装Form表单组件

    千次阅读 2020-07-07 20:17:09
    根据element-ui 的Form表单组件,写了一个公共的组件,可以满足大多数的表单类型的验证,做的这个组件主要是以弹窗的形式在页面上展示 主要的功能: -显示弹窗(根据传入的数据来决定来显示表单) -验证表单信息 -...
  • vue的from表单提交

    万次阅读 2018-01-03 11:23:17
    前几天在做一个项目时候,用到vue框架...使用时候是通过给邮箱发送一个连接然后跳转到我们写好修改密码页面,当时这个页面是通过form表单来写,在使用时候,就遇到了一个问题,由于该链接设定是只能使用
  • 废话不多说了,直接给大家贴代码了,具体代码如下所示:异步参数上传-->-->var $context = {};$context.ctx = '${ctx}';$context.resources = '${ctx}/resources';返回上传页面placeholder="请输入appkey">...
  • 搞了一个多小时个坑,在登录画面提交表单的时候,必须加上 e.preventDefault() 要不然事件会被系统拦截到。 查了文档,给出如下作用: 说明 e.preventDefault(),该方法将通知 Web 浏览器不要执行与事件关联默认...
  • 基于组件框架,如 Vue.js,在提高前端代码可扩展性方面做了很多工作,但是表单的问题仍然存在。在本教程中,将向您展示新 Vue Composition API(即将加入 Vue 3 中)如何使表单代码更清晰、更具可扩展性。为什么...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 585
精华内容 234
关键字:

vue的form表单提交

vue 订阅