使用 Vue.js 从函数中的 <ion-input> 获取值

Question

谁能告诉我如何在 Ionic Vue 应用程序中获取输入字段的值。 我尝试了以下方法，但我收到一条错误消息“this.inputEAN is not defined”。有人能告诉我我做错了什么吗？提前致谢：

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

与：

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

  

Answer 1

ionic-vue 使用 Vue3，它利用了在 vue3 中引入的组合 API。

Composition API 使用 setup() 函数使应用程序的模板部分可以访问变量，因此在使用 Vue3 时，您的 data() 将被转换为：

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

Answer 2

需要导入并添加为组件IonInput

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

Answer 3

不要用这个，只用 inputEAN.value 。