Ionic + Nuxt.js v-model doesn't pass data

user_679601 0
Viewed 579

I have created a basic app with Ionic + Nuxt.js, and using some of the ion-components. But the components don't seem to have their normal behavior. Using v-model, doesn't sync the data to the data function.

IE:

<ion-item>
  <input v-model="email" type="email" name="email"> <<< WORKS
  <ion-label position="floating">Email Address {{ email }}</ion-label>
  <ion-input v-model="email" type="email" name="email"></ion-input> <<< DOES NOT
</ion-item>


data () {
    return {
      email: '',
      password: '',
      error: null
    }
  },

Some more scope of this ion-item is wrapped in ion-app / ion-grid / row-cols. Also, running the latest versions of all (2021/05/18). Any help would be greatly appreciated.

nuxt.js ionic-framework vue.js
1 Answers

I dont know if you use Ionic 5. When you use Ionic 5 and Vue 3 your solution should work.

BUT when you use Ionic 4 you need to use @IonChange=""

and check that you importet IonInput correct.

user_65343400
Related