ionic/vue ionChange not catchable in a straightforward way since update

[NyaomiDEV]

In my code I have to do, for example:

<script setup lang="ts">
	import {
		IonContent,
		IonHeader,
		IonList,
		IonPage,
		IonTitle,
		IonToolbar,
		IonCheckbox
	} from '@ionic/vue';
</script>

<template>
	<IonPage>
		<IonHeader>
			<IonToolbar>
				<IonTitle>
					Test
				</IonTitle>
			</IonToolbar>
		</IonHeader>

		<IonContent>
			<IonList>
				<IonCheckbox @["ion-change"]="console.log"></IonCheckbox>
			</IonList>
		</IonContent>
	</IonPage>
</template>

with "ion-change" being specified literally that way, to listen to said event. Neither v-on:ionChange nor v-on:ion-change (with shorthands et cetera) are working anymore.

I noticed this after a dependency update that brought me to version 8.4.3 from version 8.4.1 - and also it went unnoticed because I personally only seldom use ionChange, relying most of the times on v-models.

(My project is https://github.com/NyaomiDEV/Ampersand if you want to know more)

Also, I was able to reproduce it minimally on StackBlitz: https://stackblitz.com/edit/vj18czas?file=src%2FApp.vue

[mpaland]

I can confirm it.
I'm using Ionic Vue, 8.4.3 and it seems that after the update ALL @ionChange and @ionInput events are not working anymore, of all components (ion-range, ion-input etc).
The event handler gets not triggered.
I downgraded to 8.4.2 and it's working fine.

[anaseqal]

i can confirm it too.
in v 8.4.3 @ionRefresh and @ionInfinite is ignored, seems like global events handler issue.

[maximilianschmid]

Same @ion-change in vue not triggered anymore after update from @ionic/vue 8.4.2 to 8.4.3

[stefantschierschke]

I can confirm this issue.

Using:
@ionic/vue: ^8.4.0
vue: ^3.5.13

None of the events from input fields are being triggered, including:
ion-select
ion-input
ion-textarea
ion-checkbox

Specifically, these event listeners are not firing:

@IonChange
@IonInput
@IonUpdate

A workaround is to rewrite the Ionic event bindings using Vue events, e.g., via v-model.
However, this should not be the final solution.

Has anyone found a proper fix for this?

[conradfr]

Oh, so I'm not crazy.

[dietmarscharf]

Downgrading to 8.4.2 seems the only solution for now!

[socialmedialabs]

Chiming in on this issue. I can confirm that ionChange does not fire since updating from ionic@8.4.2 to ionic@8.4.3.

Using ion-picker and adding an @ionChange to ion-picker-column does not fire any change events.

Downgrading to v8.4.2 solves the issue.

My setup
ionic@8.4.3
vue@3.5.13
vite@6.0.11

[NyaomiDEV]

Downgrading to 8.4.2 seems the only solution for now!

Not really, you can always refactor your entire code to use the symbol instead (sarcasm) but that's what I did, and hopefully I can just leave it like that

[Ciriak]

+1 @ionChange events are not fired anymore

[bekaku]

Seem like most of events not fired in version 8.4.3

[brandyscarney]

Thank you for the issue! We're currently investigating this, along with all other related Vue issues introduced in version 8.4.3.

[lu-roth]

i can confirm it too.
Events not working in version 8.4.3

[socialmedialabs]

@lu-roth this was apparently fixed with version 8.4.4. see #30227

[brandyscarney]

We'll have 8.4.4 out soon with a fix for this. We're just verifying that some other regressions were resolved here: #30239