fix: 修复 uni-forms 动态删减数据报错的bug

Author: mehaotian

docs/components/forms.md

@@ -53,7 +53,7 @@ uni-app的内置组件已经有了 `<form>`组件，用于提交表单内容。
 ```html
 <template>
 	<view class="">
-		<uni-forms :value="formData" ref="form">
+		<uni-forms :modelValue="formData" ref="form">
 			<uni-forms-item label="姓名" name="name">
 				<uni-easyinput type="text" v-model="formData.name" placeholder="请输入姓名" />
 			</uni-forms-item>
@@ -125,7 +125,7 @@ export default {
 ```html
 <template>
 	<view>
-		<uni-forms ref="form" :value="formData" :rules="rules">
+		<uni-forms ref="form" :modelValue="formData" :rules="rules">
 			<uni-forms-item label="姓名" name="name">
 				<uni-easyinput type="text" v-model="formData.name" placeholder="请输入姓名" />
 			</uni-forms-item>
@@ -352,7 +352,7 @@ export default {
 ```html
 <template>
 	<view>
-		<uni-forms :value="formData" ref="form">
+		<uni-forms :modelValue="formData" ref="form">
 			<uni-forms-item name="age" label="年龄">
 				<uni-easyinput v-model="formData.age" type="text" placeholder="请输入年龄" />
 			</uni-forms-item>
@@ -427,7 +427,7 @@ export default {
 
 <template>
 	<view>
-		<uni-forms  ref="form" :value="formData" validate-trigger="bind">
+		<uni-forms  ref="form" :modelValue="formData" validate-trigger="bind">
 			<uni-forms-item name="age" label="年龄">
 				<!-- uni-easyinput 的校验时机是数据发生变化， 即触发 input 时 -->
 				<uni-easyinput v-model="formData.age" type="text" placeholder="请输入年龄" />
@@ -462,7 +462,8 @@ export default {
 
 | 属性名						| 类型				|默认值	 		| 可选值							| 说明|
 | :-:							| :-:				|:-:				| :-:								| :-:		|
-| v-model/value		| Object		| -					| -									| 表单数据|
+| v-model/value [即将废弃]	| Object		| -					| -									| 表单数据|
+| v-model/modelValue| Object		| -					| -									| 表单数据|
 | rules						| Object		| -					| -									| 表单校验规则	|
 | validate-trigger| String		| submit		| bind/submit				| 表单校验时机|
 | label-position	| String		| left 			| top/left					| label 位置
@@ -481,11 +482,12 @@ validate		| 任意表单项被校验后触发，返回表单校验信息
 
 | 方法称名				| 说明		|						
 | :-:						| :-:		|						
-| submit 				| 对整个表单进行校验的方法，会返回一个 promise	|
+| submit[即将废弃]| 对整个表单进行校验的方法，会返回一个 promise	|
+| validate 			| 对整个表单进行校验的方法，会返回一个 promise	|
 | setValue			| 设置表单某一项 name 的对应值，通常在 uni-forms-item 和自定表单组件中使用|
 | validateField	| 部分表单进行校验		|
 | clearValidate	| 移除表单的校验结果	|
-| resetFields   | 重置表单, 需要把 `uni-forms` 的`value`属性改为 `v-model` ,且对内置组件可能不生效|
+| resetFields   | 重置表单, 需要把 `uni-forms` 的`modelValue`属性改为 `v-model` ,且对内置组件可能不生效|
 
 
 ```javascript

pages/nvue/forms/forms.nvue

@@ -2,7 +2,7 @@
 	<view>
 		<text class="example-info">uni-forms 组件一般由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据。</text>
 
-		<uni-forms :rules="rules" :modelValue="formData" ref="form" validate-trigger="bind" err-show-type="undertext">
+		<uni-forms :rules="rules" :value="formData" ref="form" validate-trigger="bind" err-show-type="undertext">
 			<uni-group title="基本信息" top="0">
 				<uni-forms-item name="name" required label="用户名">
 					<uni-easyinput type="text" :inputBorder="true" v-model="formData.name" placeholder="请输入用户名"></uni-easyinput>

pages/vue/forms/forms.vue

@@ -2,7 +2,7 @@
 	<view>
 		<text class="example-info">uni-forms 组件一般由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据。</text>
 
-		<uni-forms :rules="rules" :modelValue="formData" ref="form" validate-trigger="bind" err-show-type="undertext">
+		<uni-forms :rules="rules" :value="formData" ref="form" validate-trigger="bind" err-show-type="undertext">
 			<uni-group title="基本信息" top="0">
 				<uni-forms-item name="name" required label="用户名">
 					<uni-easyinput type="text" :inputBorder="true" v-model="formData.name" placeholder="请输入用户名"></uni-easyinput>

uni_modules/uni-forms/changelog.md

@@ -1,3 +1,7 @@
+## 1.0.46（2021-06-04）
+- 修复 动态删减数据导致报错的问题
+## 1.0.45（2021-06-04）
+- 新增 modelValue 属性 ，value 即将废弃
 ## 1.0.44（2021-06-02）
 - 新增 uni-forms-item 可以设置单独的 rules
 - 新增 validate 事件增加 keepitem 参数，可以选择那些字段不过滤

uni_modules/uni-forms/components/uni-forms/uni-forms.vue

@@ -1,5 +1,4 @@
 <template>
-	<!--   -->
 	<view class="uni-forms" :class="{ 'uni-forms--top': !border }">
 		<form @submit.stop="submitForm" @reset="resetForm"><slot></slot></form>
 	</view>
@@ -110,6 +109,15 @@ export default {
 		return {
 			formData: {}
 		};
+	},
+	computed:{
+		dataValue(){
+			if(JSON.stringify(this.modelValue ) === '{}'){
+				return this.value
+			}else{
+				return this.modelValue
+			}
+		}
 	},
 	watch: {
 		rules(newVal) {
@@ -144,12 +152,13 @@ export default {
 		// 监听 watch
 		registerWatch() {
 			// 取消监听,避免多次调用 init 重复执行 $watch
-			this.unwatchs.forEach(v => v());
+			this.unwatchs.forEach(v => v());
 			// watch 每个属性 ，需要知道具体那个属性发变化
-			Object.keys(this.modelValue).forEach(key => {
+			Object.keys(this.dataValue).forEach(key => {
 				let watch = this.$watch(
-					'modelValue.' + key,
-					value => {
+					'dataValue.' + key,
+					value => {
+						if(!value) return
 						// 如果是对象 ，则平铺内容
 						if (value.toString() === '[object Object]') {
 							for (let i in value) {
@@ -188,6 +197,7 @@ export default {
 			this.formData[name] = value;
 			example.val = value;
 			this.$emit('input', Object.assign({}, this.value, this.formData));
+			this.$emit('update:modelValue', Object.assign({}, this.value, this.formData));
 			return example.triggerCheck(value, callback);
 		},
 
@@ -212,6 +222,7 @@ export default {
 			});
 
 			this.$emit('input', this.formData);
+			this.$emit('update:modelValue', this.formData);
 			this.$emit('reset', event);
 		},
 
@@ -283,7 +294,7 @@ export default {
 
 			if (Array.isArray(keepitem)) {
 				keepitem.forEach(v => {
-					newFormData[v] = this.modelValue[v];
+					newFormData[v] = this.dataValue[v];
 				});
 			}
 
@@ -313,11 +324,11 @@ export default {
 		 * 对整个表单进行校验的方法，参数为一个回调函数。
 		 */
 		submit(keepitem, callback, type) {
-			for (let i in this.modelValue) {
+			for (let i in this.dataValue) {
 				const itemData = this.childrens.find(v => v.name === i);
 				if (itemData) {
 					if (this.formData[i] === undefined) {
-						this.formData[i] = this._getValue(i, this.modelValue[i]);
+						this.formData[i] = this._getValue(i, this.dataValue[i]);
 					}
 				}
 			}

uni_modules/uni-forms/package.json

@@ -1,7 +1,7 @@
 {
   "id": "uni-forms",
   "displayName": "uni-forms 表单",
-  "version": "1.0.44",
+  "version": "1.0.46",
   "description": "由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据",
   "keywords": [
     "uni-ui",

uni_modules/uni-forms/readme.md

@@ -48,7 +48,7 @@ uni-app的内置组件已经有了 `<form>`组件，用于提交表单内容。
 ```html
 <template>
 	<view class="">
-		<uni-forms :value="formData" ref="form">
+		<uni-forms :modelValue="formData" ref="form">
 			<uni-forms-item label="姓名" name="name">
 				<uni-easyinput type="text" v-model="formData.name" placeholder="请输入姓名" />
 			</uni-forms-item>
@@ -120,7 +120,7 @@ export default {
 ```html
 <template>
 	<view>
-		<uni-forms ref="form" :value="formData" :rules="rules">
+		<uni-forms ref="form" :modelValue="formData" :rules="rules">
 			<uni-forms-item label="姓名" name="name">
 				<uni-easyinput type="text" v-model="formData.name" placeholder="请输入姓名" />
 			</uni-forms-item>
@@ -347,7 +347,7 @@ export default {
 ```html
 <template>
 	<view>
-		<uni-forms :value="formData" ref="form">
+		<uni-forms :modelValue="formData" ref="form">
 			<uni-forms-item name="age" label="年龄">
 				<uni-easyinput v-model="formData.age" type="text" placeholder="请输入年龄" />
 			</uni-forms-item>
@@ -422,7 +422,7 @@ export default {
 
 <template>
 	<view>
-		<uni-forms  ref="form" :value="formData" validate-trigger="bind">
+		<uni-forms  ref="form" :modelValue="formData" validate-trigger="bind">
 			<uni-forms-item name="age" label="年龄">
 				<!-- uni-easyinput 的校验时机是数据发生变化， 即触发 input 时 -->
 				<uni-easyinput v-model="formData.age" type="text" placeholder="请输入年龄" />
@@ -457,7 +457,8 @@ export default {
 
 | 属性名						| 类型				|默认值	 		| 可选值							| 说明|
 | :-:							| :-:				|:-:				| :-:								| :-:		|
-| v-model/value		| Object		| -					| -									| 表单数据|
+| v-model/value [即将废弃]	| Object		| -					| -									| 表单数据|
+| v-model/modelValue| Object		| -					| -									| 表单数据|
 | rules						| Object		| -					| -									| 表单校验规则	|
 | validate-trigger| String		| submit		| bind/submit				| 表单校验时机|
 | label-position	| String		| left 			| top/left					| label 位置
@@ -476,11 +477,12 @@ validate		| 任意表单项被校验后触发，返回表单校验信息
 
 | 方法称名				| 说明		|						
 | :-:						| :-:		|						
-| submit 				| 对整个表单进行校验的方法，会返回一个 promise	|
+| submit[即将废弃]| 对整个表单进行校验的方法，会返回一个 promise	|
+| validate 			| 对整个表单进行校验的方法，会返回一个 promise	|
 | setValue			| 设置表单某一项 name 的对应值，通常在 uni-forms-item 和自定表单组件中使用|
 | validateField	| 部分表单进行校验		|
 | clearValidate	| 移除表单的校验结果	|
-| resetFields   | 重置表单, 需要把 `uni-forms` 的`value`属性改为 `v-model` ,且对内置组件可能不生效|
+| resetFields   | 重置表单, 需要把 `uni-forms` 的`modelValue`属性改为 `v-model` ,且对内置组件可能不生效|
 
 
 ```javascript