Get Value from <ion-input> in function using Vue.js

Question

Can someone tell how I can get the Value of an Input field in an Ionic Vue Application. I've tried the following way, but I get an error saying "this.inputEAN is not defined". Can someone tell what am I doing wrong? Thanks in advance:

<ion-input v-model="inputEAN" placeholder="f.e. 12345678910" clearInput="true" inputmode="numeric" maxlength="13" required="true"></ion-input>

With:

components: { IonHeader, IonToolbar, IonContent, IonPage},
methods: {
  addProduct: function(){
    console.log(this.inputEAN);
    //alert(this.inputEAN);
  },
},
data(){
  return{
  inputEAN: ''
  };
},
setup() {
  return { i: allIcons };
},
};

  

Answer 1

The ionic-vue uses Vue3 which makes use of composition API, a concept introduced in vue3.

Composition API makes use of setup() function to make variable accessible to the template part of the application, so when using Vue3 your data() will get converted to something like:

setup(){
  const inputEAN = reactive({ inputEAN: '' });
  return {
    inputEAN
  };
},

Answer 2

you need to import and add as a component IonInput

components: { IonHeader, IonToolbar, IonContent, IonPage, IonInput},
methods: {
  addProduct: function(){
    console.log(this.inputEAN);
    //alert(this.inputEAN);
  },
},
data(){
  return {
    inputEAN: ''
  };
},
};

Answer 3

Don't use this, just use inputEAN.value .

Answer 4

You can use Vue's template refs to do this. So add a ref to your element:

<ion-input ref="inputElement"></ion-input>

And then grab it in your setup:

setup() {
    const inputElement = ref();
    return { inputElement };
}

Then you can just access it like a normal DOM element:

console.log(inputElement.value.$el.value);