From d667dfeb1c98adf85334d1782d1bce707ef1dff3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Isma=C3=ABl=20Maurice?=
 <55036198+tisma95@users.noreply.github.com>
Date: Sun, 11 Feb 2024 20:55:39 +0100
Subject: [PATCH] 924 feat added warnings about v model (#930)

---
 src/api/sfc-script-setup.md     | 17 +++++++++++++++++
 src/guide/components/v-model.md | 19 ++++++++++++++++++-
 2 files changed, 35 insertions(+), 1 deletion(-)

diff --git a/src/api/sfc-script-setup.md b/src/api/sfc-script-setup.md
index 658653a2f..0779be4cf 100644
--- a/src/api/sfc-script-setup.md
+++ b/src/api/sfc-script-setup.md
@@ -253,6 +253,23 @@ function inc() {
 }
 ```
 
+:::warning
+Si vous avez une valeur `default` pour la propriété `defineModel` et que vous ne fournissez aucune valeur pour cette propriété à partir du composant parent, cela peut provoquer une désynchronisation entre les composants parent et enfant. Dans l'exemple ci-dessous, le composant parent `myRef` est undefined, mais le composant enfant `model` vaut 1 :
+
+```js
+// composant enfant :
+const model = defineModel({ default: 1 })
+
+// composant parent :
+const myRef = ref()
+```
+
+```html
+<Child v-model="myRef"></Child>
+```
+
+:::
+
 ### Modificateurs et transformateurs
 
 Pour accéder aux modificateurs utilisés avec la directive `v-model`, nous pouvons déstructurer la valeur de retour de `defineModel()` comme ceci :
diff --git a/src/guide/components/v-model.md b/src/guide/components/v-model.md
index ac58d5de9..3828a2d80 100644
--- a/src/guide/components/v-model.md
+++ b/src/guide/components/v-model.md
@@ -84,6 +84,23 @@ const model = defineModel({ required: true })
 const model = defineModel({ default: 0 })
 ```
 
+:::warning
+Si vous avez une valeur `default` pour la propriété `defineModel` et que vous ne fournissez aucune valeur pour cette propriété à partir du composant parent, cela peut provoquer une désynchronisation entre les composants parent et enfant. Dans l'exemple ci-dessous, le composant parent `myRef` est undefined, mais le composant enfant `model` vaut 1 :
+
+```js
+// composant enfant :
+const model = defineModel({ default: 1 })
+
+// composant parent :
+const myRef = ref()
+```
+
+```html
+<Child v-model="myRef"></Child>
+```
+
+:::
+
 </div>
 
 <div class="options-api">
@@ -211,7 +228,7 @@ const title = defineModel('title', { required: true })
 <script setup>
 defineProps({
   title: {
-    required: true 
+    required: true
   }
 })
 defineEmits(['update:title'])