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

Posted 2023-02-23

【中文标题】使用 Vue.js 从函数中的 <ion-input> 获取值

【英文标题】：Get Value from <ion-input> in function using Vue.js

【发布时间】：2021-08-23 18:06:07

【问题描述】：

谁能告诉我如何在 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 ;
,
;

  

【参考方案1】：

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

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

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

【讨论】：

感谢您的回答。如果我实现你的逻辑，我仍然不能使用带有“this.inputEAN”的变量。如何在我的示例中定义的自定义方法中使用变量。

您不必将组合 API 与 ionic 一起使用...

【参考方案2】：

需要导入并添加为组件IonInput

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

【讨论】：

感谢您的回答。我添加了“IonInput”，但仍然无法通过“this.inputEAN”访问变量。您是否有其他想法，问题可能出在哪里？

我建议的工作，所以代码中的其他地方一定有错误

【参考方案3】：

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

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。

这没有提供问题的答案。一旦你有足够的reputation，你就可以comment on any post；相反，provide answers that don't require clarification from the asker。 - From Review