呢
  • 发布:2019-06-13 16:20
  • 更新:2019-06-13 16:20
  • 阅读:1840

加快表单处理效率:增加、编辑通用

分类:uni-app

首先看表单的基本格式

<form @submit="onSubmit">  
			<view class="cu-form-group margin-top">  
				<view class="title">申请理由</view>  
				<input placeholder="请输入..." name="name" :value="formdata.name"></input>  
			</view>  
</form>

其中value因为是可以给表单赋初值,所以可以再进入编辑页时,调用查询详情的接口给formdata对象赋值,

但是因为这里是单向绑定的关系,input内容的变更如果不做特殊事件处理,formdata.name是接收不到它更改之后的值的,因此我们还是需要在上面写上name。

注意,value依赖的对象是双层的,这是为了定义变量和引用方便,我们需要在data中声明

formdata: {  
	name: ''  
},

这里的name是可以可无的。

提交表单时,可以使用

...this.formdata,  
...e.detail.value

两者合并,同时构成提交的对象

示例:

methods: {  
   onSubmit(e) {  
       // 这里因为我用了request插件所以直接使用$http,即使不用也只是这里不同  
       this.$http.post('/device/authority/authApply', {  
           ...this.formdata,  
           ...e.detail.value  
           }).then(res => {  
       })  
   }  
}
0 关注 分享

要回复文章请先登录注册