How to use v-model with Ion Input?

Ionic Framework Ionic Vue
1

How do you use v-model with ionic inputs like ion-input, ion-datetime?

Surely there are ways to do this? It seems pretty odd that something as basic as this not supported.

For example:

<ion-input name="username" v-model="username"></ion-input>

2

This works well with Ionic 5 and Vue 3. You may need to check your environment.

3

There’s a problem with the version 4 of Ionic if I’m not mistaken. Do this instead:

<ion-input type="text" @IonChange="your-input-name=$event.target.value"></ion-input>

4

What does your full code look like? v-model should work as described in the Vue 3 docs.

1 Like
5

You did include IonInput in your import statement and export statement components property? I had an issue where the input and :value seemed to be working but not v-model, and that was the reason.

3 Likes
6

This was the issue for me. I had to import any of the components I wanted to use vue attributes on. Thanks!

2 Likes