correction et fin de la page point de contact

components/Ui/Input/Email.vue

@@ -10,7 +10,7 @@ Champs de saisie de type Text dédié à la saisie d'emails
     :error="error"
     :error-message="errorMessage"
     :rules="rules"
-    @change="$emit('update', $event, field)"
+    @update="update"
   />
 </template>
 
@@ -54,7 +54,7 @@ export default defineComponent({
       default: null
     }
   },
-  setup (props) {
+  setup (props, {emit}) {
     const { app: { i18n } } = useContext()
 
     const rules = [
@@ -67,8 +67,13 @@ export default defineComponent({
       )
     }
 
+    const update = (value: string) =>{
+      emit('update', value, props.field)
+    }
+
     return {
-      rules
+      rules,
+      update
     }
   }
 })

components/Ui/Input/Phone.vue

@@ -9,13 +9,12 @@ Champs de saisie d'un numéro de téléphone
     <vue-tel-input-vuetify
       :field="field"
       :label="label"
-      :value="data"
+      v-model="myPhone"
       :readonly="readonly"
       clearable
       valid-characters-only
       validate-on-blur
       :rules="rules"
-      :active-country="{iso2: 'FR'}"
       @input="onInput"
       @change="onChange"
     />
@@ -23,7 +22,7 @@ Champs de saisie d'un numéro de téléphone
 </template>
 
 <script lang="ts">
-import { defineComponent, Ref, ref, useContext } from '@nuxtjs/composition-api'
+import { defineComponent, Ref, ref, useContext, computed } from '@nuxtjs/composition-api'
 
 export default defineComponent({
   props: {
@@ -56,37 +55,46 @@ export default defineComponent({
       default: null
     }
   },
-  setup () {
+  setup (props, {emit}) {
     const { app: { i18n } } = useContext()
 
     const nationalNumber: Ref<string | number> = ref('')
     const internationalNumber: Ref<string | number> = ref('')
     const isValid: Ref<boolean> = ref(false)
-    const country: Ref<string> = ref('')
+    const onInit: Ref<boolean> = ref(true)
+
+    const onInput = (_: any, { number, valid, countryChoice }: { number: any, valid: boolean, countryChoice: any }) => {
+      isValid.value = valid
+      nationalNumber.value = number.national
+      internationalNumber.value = number.international
+      onInit.value = false
+    }
+
+    const onChange = () => {
+      if (isValid.value) {
+        emit('update', internationalNumber.value, props.field)
+      }
+    }
+
+    const myPhone = computed(
+      {
+        get:()=>{
+          return onInit.value ? props.data : nationalNumber.value
+        },
+        set:(value)=>{
+          return props.data
+        }
+      }
+    )
 
     return {
-      nationalNumber,
-      internationalNumber,
-      isValid,
-      country,
+      myPhone,
+      onInput,
+      onChange,
       rules: [
         () => isValid.value || i18n.t('phone_error')
       ]
     }
-  },
-  methods: {
-    onInput (_: any, { number, valid, country }: { number: any, valid: boolean, country: any }) {
-      this.isValid = valid
-      this.nationalNumber = number.national
-      this.internationalNumber = number.international
-      this.country = country && country.name
-      // console.log(this.field, this.isValid, this.nationalNumber, this.internationalNumber, this.country)
-    },
-    onChange () {
-      if (this.isValid) {
-        this.$emit('update', this.internationalNumber, this.field)
-      }
-    }
   }
 })