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

Question

我在使用带组件的 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 仍然具有之前输入的值

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

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

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

How to handle clearInput ionic to clear v-model

ionic-framework

vue.js

vuejs3

vue-composition-api