Browse Source

fix the UiForm watcher to avoid reactivity loss at submission

Olivier Massot 5 months ago
parent
commit
cdd336f522
1 changed files with 12 additions and 3 deletions
  1. 12 3
      components/Ui/Form.vue

+ 12 - 3
components/Ui/Form.vue

@@ -387,9 +387,18 @@ const validate = async function () {
 }
 
 // #### Gestion de l'état dirty
-watch(props.modelValue, async (newEntity, oldEntity) => {
-  setIsDirty(true)
-})
+watch(
+  // /!\ Important de passer par un getter de l'objet (le `() => ({ ...props.modelValue })`),
+  //     car on perd la réactivité de celui-ci quand on soumet le formulaire
+  //     (et donc le watcher cesse de fonctionner)
+  () => ({ ...props.modelValue }),
+  (newEntity, oldEntity) => {
+    if (JSON.stringify(newEntity) !== JSON.stringify(oldEntity)) {
+      setIsDirty(true)
+    }
+  }
+)
+
 
 /**
  * Handle events if the form is dirty to prevent submission