How to handle clearInput ionic to clear v-model

Issue

i have a problem to clear input using ionic vue v-model with Components

child component

file AppInput.vue:
<ion-input :clear-input="true"  :value="modelValue" @ionInput="handleInput($event)"></ion-input>

setup(props, context) {
  const handleInput = (e: any) => {
    context.emit("update:modelValue", e.target.value);
  };
  return {handleInput}
})

parent component

file Registration.vue
<app-input v-model="formLogin.email" label="Email"></app-input>

setup() {
    const formLogin = reactive({
      email: "",
    });

   return {formLogin}
})

when i click clear input button the value from input was clear but my model formLogin.email still has value from previous input

how to add event when i click clear input

Solution

Try to add the ionChange which also triggered when you clear the input :

 <ion-input :clear-input="true"  :value="modelValue" @ionInput="handleInput($event)" @ionChange="onChange"></ion-input>

script:

setup(props, context) {
  const handleInput = (e: any) => {
    context.emit("update:modelValue", e.target.value);
  };
  const onChange=(e:any){
     if(!e.target.value) {//in case of cleared input
         context.emit("update:modelValue", e.target.value);
     }
   }
  return {handleInput}
})

Answered By - Boussadjra Brahim