Adds a internalFormModelProxy to FormulateForm to allow two way model bindings

dist/formulate.esm.js

@@ -622,18 +622,11 @@ var script$1 = {
   },
   data: function data () {
     return {
-      registry: {}
+      registry: {},
+      internalFormModelProxy: {}
     }
   },
   computed: {
-    formModel: {
-      get: function get () {
-        return this.formulateValue
-      },
-      set: function set (value) {
-        this.$emit('input', value);
-      }
-    },
     hasFormulateValue: function hasFormulateValue () {
       return this.formulateValue && typeof this.formulateValue === 'object'
     },
@@ -652,24 +645,31 @@ var script$1 = {
           typeof newValue === 'object'
         ) {
           for (var field in newValue) {
-            if (this.registry.hasOwnProperty(field) && !shallowEqualObjects(newValue[field], this.registry[field].internalModelProxy)) {
-              // If the value of the formulateValue changed (probably as a prop)
-              // and it doesn't match the internal proxied value of the registered
-              // component, we set it explicitly. Its important we check the
-              // model proxy here since the model itself is not fully synchronous.
+            if (this.registry.hasOwnProperty(field) &&
+              !shallowEqualObjects(newValue[field], this.internalFormModelProxy[field]) &&
+              !shallowEqualObjects(newValue[field], this.registry[field].internalModelProxy[field])
+            ) {
+              this.setFieldValue(field, newValue[field]);
               this.registry[field].context.model = newValue[field];
             }
           }
         }
       },
-      deep: true
+      deep: true,
+      immediate: false
+    }
+  },
+  created: function created () {
+    if (this.$options.propsData.hasOwnProperty('formulateValue')) {
+      this.internalFormModelProxy = Object.assign({}, this.formulateValue);
     }
   },
   methods: {
     setFieldValue: function setFieldValue (field, value) {
       var obj;
 
-      this.formModel = Object.assign({}, this.formulateValue, ( obj = {}, obj[field] = value, obj ));
+      Object.assign(this.internalFormModelProxy, ( obj = {}, obj[field] = value, obj ));
+      this.$emit('input', Object.assign({}, this.internalFormModelProxy));
     },
     register: function register (field, component) {
       this.registry[field] = component;

dist/formulate.min.js

@@ -625,18 +625,11 @@ var Formulate = (function (exports, isPlainObject, nanoid) {
     },
     data: function data () {
       return {
-        registry: {}
+        registry: {},
+        internalFormModelProxy: {}
       }
     },
     computed: {
-      formModel: {
-        get: function get () {
-          return this.formulateValue
-        },
-        set: function set (value) {
-          this.$emit('input', value);
-        }
-      },
       hasFormulateValue: function hasFormulateValue () {
         return this.formulateValue && typeof this.formulateValue === 'object'
       },
@@ -655,24 +648,31 @@ var Formulate = (function (exports, isPlainObject, nanoid) {
             typeof newValue === 'object'
           ) {
             for (var field in newValue) {
-              if (this.registry.hasOwnProperty(field) && !shallowEqualObjects(newValue[field], this.registry[field].internalModelProxy)) {
-                // If the value of the formulateValue changed (probably as a prop)
-                // and it doesn't match the internal proxied value of the registered
-                // component, we set it explicitly. Its important we check the
-                // model proxy here since the model itself is not fully synchronous.
+              if (this.registry.hasOwnProperty(field) &&
+                !shallowEqualObjects(newValue[field], this.internalFormModelProxy[field]) &&
+                !shallowEqualObjects(newValue[field], this.registry[field].internalModelProxy[field])
+              ) {
+                this.setFieldValue(field, newValue[field]);
                 this.registry[field].context.model = newValue[field];
               }
             }
           }
         },
-        deep: true
+        deep: true,
+        immediate: false
+      }
+    },
+    created: function created () {
+      if (this.$options.propsData.hasOwnProperty('formulateValue')) {
+        this.internalFormModelProxy = Object.assign({}, this.formulateValue);
       }
     },
     methods: {
       setFieldValue: function setFieldValue (field, value) {
         var obj;
 
-        this.formModel = Object.assign({}, this.formulateValue, ( obj = {}, obj[field] = value, obj ));
+        Object.assign(this.internalFormModelProxy, ( obj = {}, obj[field] = value, obj ));
+        this.$emit('input', Object.assign({}, this.internalFormModelProxy));
       },
       register: function register (field, component) {
         this.registry[field] = component;

dist/formulate.umd.js

@@ -628,18 +628,11 @@
     },
     data: function data () {
       return {
-        registry: {}
+        registry: {},
+        internalFormModelProxy: {}
       }
     },
     computed: {
-      formModel: {
-        get: function get () {
-          return this.formulateValue
-        },
-        set: function set (value) {
-          this.$emit('input', value);
-        }
-      },
       hasFormulateValue: function hasFormulateValue () {
         return this.formulateValue && typeof this.formulateValue === 'object'
       },
@@ -658,24 +651,31 @@
             typeof newValue === 'object'
           ) {
             for (var field in newValue) {
-              if (this.registry.hasOwnProperty(field) && !shallowEqualObjects(newValue[field], this.registry[field].internalModelProxy)) {
-                // If the value of the formulateValue changed (probably as a prop)
-                // and it doesn't match the internal proxied value of the registered
-                // component, we set it explicitly. Its important we check the
-                // model proxy here since the model itself is not fully synchronous.
+              if (this.registry.hasOwnProperty(field) &&
+                !shallowEqualObjects(newValue[field], this.internalFormModelProxy[field]) &&
+                !shallowEqualObjects(newValue[field], this.registry[field].internalModelProxy[field])
+              ) {
+                this.setFieldValue(field, newValue[field]);
                 this.registry[field].context.model = newValue[field];
               }
             }
           }
         },
-        deep: true
+        deep: true,
+        immediate: false
+      }
+    },
+    created: function created () {
+      if (this.$options.propsData.hasOwnProperty('formulateValue')) {
+        this.internalFormModelProxy = Object.assign({}, this.formulateValue);
       }
     },
     methods: {
       setFieldValue: function setFieldValue (field, value) {
         var obj;
 
-        this.formModel = Object.assign({}, this.formulateValue, ( obj = {}, obj[field] = value, obj ));
+        Object.assign(this.internalFormModelProxy, ( obj = {}, obj[field] = value, obj ));
+        this.$emit('input', Object.assign({}, this.internalFormModelProxy));
       },
       register: function register (field, component) {
         this.registry[field] = component;

src/FormulateForm.vue

@@ -33,18 +33,11 @@ export default {
   },
   data () {
     return {
-      registry: {}
+      registry: {},
+      internalFormModelProxy: {}
     }
   },
   computed: {
-    formModel: {
-      get () {
-        return this.formulateValue
-      },
-      set (value) {
-        this.$emit('input', value)
-      }
-    },
     hasFormulateValue () {
       return this.formulateValue && typeof this.formulateValue === 'object'
     },
@@ -63,22 +56,29 @@ export default {
           typeof newValue === 'object'
         ) {
           for (const field in newValue) {
-            if (this.registry.hasOwnProperty(field) && !shallowEqualObjects(newValue[field], this.registry[field].internalModelProxy)) {
-              // If the value of the formulateValue changed (probably as a prop)
-              // and it doesn't match the internal proxied value of the registered
-              // component, we set it explicitly. Its important we check the
-              // model proxy here since the model itself is not fully synchronous.
+            if (this.registry.hasOwnProperty(field) &&
+              !shallowEqualObjects(newValue[field], this.internalFormModelProxy[field]) &&
+              !shallowEqualObjects(newValue[field], this.registry[field].internalModelProxy[field])
+            ) {
+              this.setFieldValue(field, newValue[field])
               this.registry[field].context.model = newValue[field]
             }
           }
         }
       },
-      deep: true
+      deep: true,
+      immediate: false
+    }
+  },
+  created () {
+    if (this.$options.propsData.hasOwnProperty('formulateValue')) {
+      this.internalFormModelProxy = Object.assign({}, this.formulateValue)
     }
   },
   methods: {
     setFieldValue (field, value) {
-      this.formModel = Object.assign({}, this.formulateValue, { [field]: value })
+      Object.assign(this.internalFormModelProxy, { [field]: value })
+      this.$emit('input', Object.assign({}, this.internalFormModelProxy))
     },
     register (field, component) {
       this.registry[field] = component

test/FormulateForm.test.js

@@ -123,6 +123,6 @@ describe('FormulateForm', () => {
         default: '<FormulateInput type="text" name="testinput" formulate-value="override-data" />'
       }
     })
-    expect(wrapper.emitted().input[0]).toEqual([{ testinput: 'override-data' }])
+    expect(wrapper.emitted().input[wrapper.emitted().input.length - 1]).toEqual([{ testinput: 'override-data' }])
   })
 })