如何处理 clearInput ionic 以清除 v-model答案

【问题标题】：How to handle clearInput ionic to clear v-model如何处理 clearInput ionic 以清除 v-model
【发布时间】：2021-09-15 11:55:46
【问题描述】：

我在使用带有组件的 ionic vue v-model 清除输入时遇到问题

子组件

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}
})

父组件

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

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

   return {formLogin}
})

当我单击清除输入按钮时，输入的值已清除但我的模型 formLogin.email 仍然具有先前输入的价值

当我点击清除输入时如何添加事件

【问题讨论】：

标签： vue.js ionic-framework vuejs3 vue-composition-api

【解决方案1】：

尝试添加ionChange，这在您清除输入时也会触发：

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

脚本：

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}
})

【讨论】：