uni-app小程序处理后台返回的form表单数据并展示

先来看一下设计图

1、先请求接口看一下后台返回的数据

2、我们需要处理的数据只是data中的report_from，所以把report_from赋值给一个空数组：this.reportList = res.data.data

3、在点击提交请求提交接口之前对数据进行处理
因为每一条数据都是一个对象，所以循环之前定义一个空对象，然后对
数据进行循环，把值塞进这个空对象，在下面要把这个对象传给后台

let obj = {}
			for (let index = 0; index < this.formList.length; index++) {
				this.$set(obj, this.formList[index].field_name, this.formList[index].field_default)
				if(this.reportList.is_report == 0){
					if(this.formList[index].is_required == 1 && this.formList[index].field_default == ''){
						console.log(this.formList[index].field_default);
						uni.showToast({
							icon:'none',
							title:'您還有相應的信息沒有填寫'
						})
						return false
					}
				}
			}
			console.log(JSON.stringify(obj));
			console.log('成功');

在这里利用vue的$set把这个空对象的值重新设置一下vue.$set(需要设置的值，key，value)
这样点击提交的时候就拿到了我们的数据

4、最后到HTML中去渲染

<view class="main1_three" v-else>
						<view class="main_three_top">選擇服務類型(*代表必填项)</view>
						<view class="main_three_view" v-for="(reportItem,index) in reportList.report_from" :key="index">
							<view>{{reportItem.field_name}}</view>
							<input type="number" placeholder="請輸入內容" v-model="reportItem.field_default">
							<view v-if="reportItem.is_required == 1" style="color: red;">*</view>
						</view>
						<view>
							<button v-show="add" @click="addShuju()">提交</button>
						</view>
					</view>

效果图：