Ion-checkbox @update:modelValue triggered when bound :checked attribute changes elsewhere

Ionic Framework Ionic Vue
1

I think saw this issue raised somewhere but I can’t find it again and I’m hoping for a workaround.

I have two pages that have ion-checkboxes bound to the same data kept in a pinia store. I’ve found when I navigate from one page to the other (so both pages are created/cached by ionic) if I then update the store in the visible page the @update:modelValue in the cached/non-visible page is also being triggered.

For now, I’ve changed from:

<ion-checkbox @update:modelValue="toggleReview()" :checked="status.isSelected"></ion-checkbox>

to a plain input to avoid @update:modelValue being called in non-visible/cached pages:

<input type="checkbox" @change="toggleReview()" :checked="status?.isReview" color="secondary" />

Am I missing something?

2

Found it! It is a known issue and there is an RFC to make it work as I’d expect it to: ionChange will only emit from user committed changes · Discussion #25532 · ionic-team/ionic-framework · GitHub

I guess I could watch the ionic lifecycle events and set a visible boolean and check it wherever an @update:modelValue is triggered and ignore the update if !visible. Kind of ugly to sprinkle that everywhere…