I installed a clean Ionic + Vue project and I'm trying to add an input and trigger the @ionBlur event on it... but the event doesn't fire. The function is not called.

NOT WORKING:

<template>
    <ion-page>
        <ion-content>
            <ion-input
                v-model="formData.email"
                @ionBlur="testEvent('ionBlur')"
            ></ion-input>
        </ion-content>
    </ion-page>
</template>

<script setup>
import {IonPage, IonContent, IonInput} from "@ionic/vue";
import {ref} from "vue";

const formData = ref({
    email: '',
})

const testEvent = (e) => {
    console.log('start', e)
}
</script>

But there is a big mystery, when I remove IonInput from the import, the @ionBlur event starts running and the function is called

WORKING:

<template>
    <ion-page>
        <ion-content>
            <ion-input
                v-model="formData.email"
                @ionBlur="testEvent('ionBlur')"
            ></ion-input>
        </ion-content>
    </ion-page>
</template>

<script setup>
import {IonPage, IonContent} from "@ionic/vue";
import {ref} from "vue";

const formData = ref({
    email: '',
})

const testEvent = (e) => {
    console.log('start', e)
}
</script>

..but of course I get an error: Failed to resolve component: ion-input

// package.json

"dependencies": {
    "@capacitor/app": "7.0.0",
    "@capacitor/core": "7.0.1",
    "@capacitor/haptics": "7.0.0",
    "@capacitor/keyboard": "7.0.0",
    "@capacitor/status-bar": "7.0.0",
    "@ionic/vue": "^8.0.0",
    "@ionic/vue-router": "^8.0.0",
    "ionicons": "^7.0.0",
    "vue": "^3.3.0",
    "vue-router": "^4.2.0"
  },
  "devDependencies": {
    "@capacitor/cli": "7.0.1",
    "@vitejs/plugin-legacy": "^5.0.0",
    "@vitejs/plugin-vue": "^4.0.0",
    "@vue/eslint-config-typescript": "^12.0.0",
    "@vue/test-utils": "^2.3.0",
    "cypress": "^13.5.0",
    "eslint": "^8.35.0",
    "eslint-plugin-vue": "^9.9.0",
    "jsdom": "^22.1.0",
    "terser": "^5.4.0",
    "typescript": "~5.6.2",
    "vite": "~5.2.0",
    "vitest": "^0.34.6",
    "vue-tsc": "^2.1.10"
  },

I have already tried updating Ionic to version 8.4.X and vue to 3.5.X but it doesnt help it

the problem applies to all events, also on other components: ion-checkbox etc.

I found out through vue devtools that $attrs should be set (I have it on old projects) but they are not

I installed a clean Ionic + Vue project and I'm trying to add an input and trigger the @ionBlur event on it... but the event doesn't fire. The function is not called.

NOT WORKING:

<template>
    <ion-page>
        <ion-content>
            <ion-input
                v-model="formData.email"
                @ionBlur="testEvent('ionBlur')"
            ></ion-input>
        </ion-content>
    </ion-page>
</template>

<script setup>
import {IonPage, IonContent, IonInput} from "@ionic/vue";
import {ref} from "vue";

const formData = ref({
    email: '',
})

const testEvent = (e) => {
    console.log('start', e)
}
</script>

But there is a big mystery, when I remove IonInput from the import, the @ionBlur event starts running and the function is called

WORKING:

<template>
    <ion-page>
        <ion-content>
            <ion-input
                v-model="formData.email"
                @ionBlur="testEvent('ionBlur')"
            ></ion-input>
        </ion-content>
    </ion-page>
</template>

<script setup>
import {IonPage, IonContent} from "@ionic/vue";
import {ref} from "vue";

const formData = ref({
    email: '',
})

const testEvent = (e) => {
    console.log('start', e)
}
</script>

..but of course I get an error: Failed to resolve component: ion-input

// package.json

"dependencies": {
    "@capacitor/app": "7.0.0",
    "@capacitor/core": "7.0.1",
    "@capacitor/haptics": "7.0.0",
    "@capacitor/keyboard": "7.0.0",
    "@capacitor/status-bar": "7.0.0",
    "@ionic/vue": "^8.0.0",
    "@ionic/vue-router": "^8.0.0",
    "ionicons": "^7.0.0",
    "vue": "^3.3.0",
    "vue-router": "^4.2.0"
  },
  "devDependencies": {
    "@capacitor/cli": "7.0.1",
    "@vitejs/plugin-legacy": "^5.0.0",
    "@vitejs/plugin-vue": "^4.0.0",
    "@vue/eslint-config-typescript": "^12.0.0",
    "@vue/test-utils": "^2.3.0",
    "cypress": "^13.5.0",
    "eslint": "^8.35.0",
    "eslint-plugin-vue": "^9.9.0",
    "jsdom": "^22.1.0",
    "terser": "^5.4.0",
    "typescript": "~5.6.2",
    "vite": "~5.2.0",
    "vitest": "^0.34.6",
    "vue-tsc": "^2.1.10"
  },

I have already tried updating Ionic to version 8.4.X and vue to 3.5.X but it doesnt help it

the problem applies to all events, also on other components: ion-checkbox etc.

I found out through vue devtools that $attrs should be set (I have it on old projects) but they are not

• ionic-framework

1 Answer 1

You can downgrade to make it work.

BUG (currently latest version) - events not working:

"@ionic/vue": "^8.4.3",
"@ionic/vue-router": "^8.4.3",

NO BUG (correct previous version):

"@ionic/vue": "^8.4.2",
"@ionic/vue-router": "^8.4.2",