精华内容
下载资源
问答
  • 今天小编就为大家分享一篇vue form 表单提交后刷新页面的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 主要介绍了Vue form 表单提交+ajax异步请求+分页效果,需要的朋友可以参考下
  • 最近做的项目中,有增删改表格功能,在操作后需要实时更新页面数据...vue会自动更新dmo }) }, 以上这篇vue form 表单提交后刷新页面的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。

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

    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-18 18:04:53
    尝试了N种方法,都不可以成功完成逻辑,最终是jQuery动态创建form表单提交的。 最终成功代码: //生成from表单方法 放在mounted 里,在button事件里执行,注意button不要为submit,数据在别的方法里,这...

    项目vue-cli搭建
    需求为:vue页面跳转至第三方的支付页面
    操作流程为:点击确认按钮时得到得到第三方网页的url和参数信息,以form表单的post方式提交
    尝试了N种方法,都不可以成功完成逻辑,最终是jQuery动态创建form表单提交的。
    最终成功代码:

    //生成from表单方法  放在mounted 里,在button事件里执行,注意button不要为submit,数据在别的方法里,这里就不贴了
    generate() {
        //创建form
        var form = $("<form></form>");
        //设置属性
        form.attr("action", yourURL);
        form.attr("method", "post");r
        //创建input,即参数
        //我这里数据格式是json,所以是for in
        for (const key in yourData) {
            if (yourData.hasOwnProperty(key)) {
                const element = yourData[key];
                form.append($(`<input type='text' name=${key}>`).attr("value", element));
            }
        }
        form.appendTo("body");
        //不需要展示所以把ta隐藏起来
        form.hide();
        //提交表单
        form.submit();
    }
    

    失败方案 一:
    form直接创建在html中(ref:from钩子函数),用status控制不要显示,点击button时,先@submit.prevetn='submitBefore’阻止默认事件请求API获取数据,动态生成input,数据获取成功后 this.$refs.from.submit(),看起来是没有什么问题,但自动提交的时候并没有带获取到的数据过去,原因可能是时间问题?有待深究…
    失败方案 二:οnsubmit="return submitBefore() ,此方法为submitBefore返回true时执行提交,返回false时不执行提交,这样就可以在form默认提交前做想做的事情了,有问题吗?没有,拿到普通的html代码中跑一遍,杠杠的,然而在vue里不行…
    失败方案 三:button不用submit,绑定一个ok事件,在事件里new FormData ,然后添加数据进去,用axios请求,然后,不行哦,原因你们懂得…
    总之这个问题有待深究,下次再更(不知道有没有下次。。。。)

    展开全文
  • 最近做的项目中,有增删改表格功能,在操作后需要实时更新...vue会自动更新dmo }) }, 以上这篇vue form 表单提交后刷新页面的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

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

    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-03-11 16:48:28
    vue使用@submit.prevent=&quot;&quot;来设置提交时执行的函数,并阻止页面跳转: &amp;lt;form id=&quot;msgForm&quot; action=&quot;http://api.clustar.ai/visitorinfo/&quot; ...

    vue使用@submit.prevent=""来设置提交时执行的函数,并阻止页面跳转:

     <form id="msgForm" action="" method="post" @submit.prevent="sub">
    

    sub函数写在methods内:

      methods:{
          $.post('http://api.test.ai/visitorinfo/', $('#msgForm').serialize(), function(data){
            console.log(data);
          })  
      }
    
    展开全文
  • vue form 表单提交后刷新页面

    万次阅读 2018-01-15 14:00:15
    最近做的项目中,有增删改表格功能,在操作后需要实时更新页面数据。下面可以这样解决。 ... this.lnitializationData()//请求成功后调用初始化函数,vue会自动更新dmo }) },
  • 废话不多说了,直接给大家贴代码了,具体代码如下所示:异步参数上传-->-->var $context = {};$context.ctx = '${ctx}';$context.resources = '${ctx}/resources';返回上传页面placeholder="请输入appkey">...
  • 最近做的项目中,有增删改表格功能,在操作后需要实时更新...vue会自动更新dmo }) }, 以上这篇vue form 表单提交后刷新页面的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
  • Vue form 表单提交+ajax异步请求+分页

    千次阅读 2017-04-21 17:59:58
    "${ctx }/js/vue/vue.js" > script > < script src = "${ctx }/js/business/exportconfig.js" type = "text/javascript" > script > html > var vue = new Vue({ el: '#app' , data: ...
  • 废话不多说了,直接给大家贴代码了,具体代码如下所示:异步参数上传-->-->var $context = {};$context.ctx = '${ctx}';$context.resources = '${ctx}/resources';返回上传页面placeholder="请输入appkey">...
  • 首先介绍下,我是如何学习vue的,我学习vue之前,做过哪些思考?1.vue技术刚出来的时候,我第一眼会问,vue是什么?这个框架要干嘛?2.没有vue这个框架,我们之前是怎么做的,我们遇到了哪些糟心的问题?3.怎么学习...
  • 在本教程中,将向您展示新的 Vue Composition API(即将加入 Vue 3 中)如何使表单代码更清晰、更具可扩展性。为什么表单代码经常很烂 像 Vue 这种基于组件的框架的关键设计模式是组件组合。这种模式将应...
  • vue form表单数据提交

    万次阅读 多人点赞 2019-07-28 19:21:38
    利用v-model能比较便捷地上传用户信息的数据,不用一个个参数地拼接。直接在data根据要传的字段定义一个对象, 再利用双向绑定得到值。下面写了传json格式跟formData格式的两种...form action=""> <input ty...
  • 新的需求,需要使用原生表单提交并待参跳转到对应的页面。在网上查了一些,有些是在form表单添加 @submit.prevent="submit"但是没有成功,在点击注册的时候是函数都没有进去,同时还有一个问题,因为采用的是element...
  • 今天小编就为大家分享一篇vue 解决form表单提交但不跳转页面的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • Vue.js form 表单提交后刷新页面的方法发布于 2020-2-26|复制链接分享一篇关于vue form 表单提交后刷新页面的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小妖过来看看吧最近做的项目中,有增删改表格...
  • vue.js form表单提交

    2018-12-21 18:06:00
    form表单提交是前端经常要用到的,vue.js的form提交只是比普通的多加几个东西 其他都是大同小异的 上代码吧! 主要就是v-model的用法啦 <form action="" method="post" enctype="multipart/form-data"> ...
  • 在JSP页面开发中,我们常常会用到form表单做数据提交,由于以前一直只是使用form表单提交单个对象,只要表单文本域的name值和接收的对象的属性名一致,那么传值就没有什么问题。不过,在前几天的开发任务中,遇到了...
  • 在初学习Laravel的过程中,看过的教程肯定都有登陆这个表单提交操作,当提交错误的时候,系统会返回$errors,而我们可以根据$errors来显示在input框下面。但是,在写vuejs的时候,我就感觉自己比较的混乱,就是直接...
  • Vue中使用form表单提交刷新问题

    千次阅读 2020-05-13 12:52:21
    vue中使用表单form默认提交行为是刷新一下,在这儿我们使用事件修饰符prevent来阻止form表单的默认行为 在@click后面跟上prevent 这样就可以阻止form表单默认刷新行为了 <input type="submit" value="提交" @...
  • 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=...
  • 1、input 赋值后表单提交却为空 在调用接口将返回的值赋在表单的 input 上或者子页面传递数值给父页面form表单model元素后,提交表单,明明值已经赋上去了,结果提交后显示的该值为空。具体看以下代码: <el-...
  • vue form 表单验证-我的

    2020-05-12 19:16:30
    vue form 表单验证名称设置提交名称rules 设置文字提示提交处理 名称设置 <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"> 提交名称 // ruleForm <...
  • vueform表单提交成功后置空

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

    2019-11-28 23:46:35
    Vue学习(二) ...Form方式提交Post <script> export default { data() { return { account: "", password: "" }; }, methods: { login() { let param = new FormData(); // 创建form...
  • 使用:ant design vue问题:form表单提交时,只在控制台输出error,输入框不标红也没提示打开一个弹窗 弹窗是表单验证是这么写的rules: { name: { rules: [ { required: true, message: '请输入名称' }, { validator: ...

空空如也

空空如也

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

vueform表单提交

vue 订阅