处理value值改变时页面dom未更新问题

Author: GavinZhuLei

package.json

@@ -1,7 +1,7 @@
 {
   "name": "form-making",
   "description": "基于Vue,ElementUI开发的一款表单设计器，提高表单开发效率的利器，让开发者从枯燥的表单代码编写中解放出来",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "author": "GavinZhulei",
   "license": "MIT",
   "keywords": [

src/components/Container.vue

@@ -86,8 +86,9 @@
       ref="widgetPreview"
       @on-submit="handleTest"
       width="1000px"
+      form
     >
-      <generate-form :data="widgetForm" :remote="remoteFuncs" :value="widgetModels" ref="generateForm">
+      <generate-form v-if="previewVisible" :data="widgetForm" :remote="remoteFuncs" :value="widgetModels" ref="generateForm">
 
         <template slot="blank" slot-scope="scope">
           宽度：<el-input v-model="scope.model.blank.width" style="width: 100px"></el-input>
@@ -183,10 +184,7 @@ export default {
           })
         }
       },
-      widgetModels: {
-        key1: '啦啦啦啦啦',
-        key2: '选项2'
-      },
+      widgetModels: {},
       blank: '',
       htmlTemplate: '',
       jsonTemplate: ''

src/components/GenerateForm.vue

@@ -95,6 +95,18 @@ export default {
           }
         })
       })
+    },
+    refresh () {
+      
+    }
+  },
+  watch: {
+    value: {
+      deep: true,
+      handler (val) {
+        console.log(JSON.stringify(val))
+        this.models = {...this.models, ...val}
+      }
     }
   }
 }

src/components/GenerateFormItem.vue

@@ -209,6 +209,7 @@ export default {
     models: {
       deep: true,
       handler (val) {
+        console.log('--------')
         this.dataModel = val[this.widget.model]
       }
     }