vue获取form表单的值示例

这里使用的是Element-ui组件

html:

JS:

var phone = this.phone;

var password = this.password;

var that = this;

var phone = that .phone;

var password = that .password;

this.$axios({

method:'post',

url:'api/user/logout',

data:this.qs.stringify({phone:phone,password:password})

}).then((res) =>{ //这里使用了ES6的语法

if (res.data.status==200){

alert(res.data.message);

this.$emit('userSignIn', ''); //记录登录状态

this.$router.replace({path: '/login'}); //成功后跳转

}

}).catch((error) =>{

alert(error.data.message) //请求失败返回的数据

})

以上这篇vue获取form表单的值示例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

时间： 2019-10-27

标题描述看起来有些复杂,有vue,Element,又有表单验证,还有v-for循环?是不是有点乱?不过我相信开发中遇到过此问题的同学,一看就明白我说的意思了. 首先Element组件有一套完善的表单验证方法,官方文档写的也很清楚:Element表单验证API,正常按照官方文档添加rules规则,需要验证的表单项设置prop,然后提交表单时通过form的validate方法验证表单项就可以了. 然鹅问题来了,如果表单项里有通过v-for动态生成的表单项,如何设置验证呢?这个官方文档并没有明确的说法

使用情况,vue中返回的数据循环遍历如果用到v-if时不能直接赋值true 或者false,要true 或者false push到数组里面,隐藏或显示时用 splice方法. 以下是详情 1. 第一步先在data中定义数组 data () { return { passSaveShow: [], // 通行组保存和取消的显示隐藏 passEditShow: [], // 通行组编辑的显示隐藏 checkedUnLink: [], // 取消关联是否选中 valDate: [], // 有效期显示

Vue.js可以很方便的实现数据双向绑定,所以在处理表单,人机交互方面具有很大的优势.下面给大家介绍Vue.js表单标签中的单选按钮.复选按钮和下拉列表的取值问题. 摘要: 表单标签取值问题中,单选按钮.复选按钮和下拉列表都比较特殊.这里总结一下vue.js中关于单选按钮.复选按钮和下拉列表不同情况的取值特殊性问题. 表单标签取值问题中,单选按钮.复选按钮和下拉列表都比较特殊.这里总结一下vue.js中关于单选按钮.复选按钮和下拉列表不同情况的取值特殊性问题. 一.单选按钮 单选按钮:单选按钮用

场景 今天产品经理提了一个需求: 一个API的账号体系增加一个checkbox控制API输出字段,但是有三个是伪控制,事实上是接口里面写死的, 所以是必须选中的 分析 重点是怎么在Vue组件中实现 checkbox的disabled, 哈 这个肯定是需要使用元素绑定的 Vue做这个操作可以实现disabled input元素的传递, 这个就很秒了 解决 具体解决方案如下 <

在vue中有时候可能想像使用jq一样给某个元素添加属性,如 $('#select1').attr('disabled','disabled') 这种方法也能实现,但是在vue中能用vue的方法还是尽量不要使用jq 使用vue的方法来添加属性可以这样:

本文实例讲述了JS document form表单元素操作.分享给大家供大家参考,具体如下:

form表单操作