跟踪alpine.js中的输入变化

Question

我正在学习alpine.js，并试图捕获用户输入值。我使用了"x-on:input“，但它没有调用函数。

下面是简单的表单输入

 <input type="email" class="form-control" x-on:input.debounce="validateEmail($event)" x-model="userEmail" id="email" aria-describedby="emailHelp" placeholder="Enter email">

这是我的index.js中的基本方法

function validateEmail(event){
console.log(userEmail);

}

函数没有被调用。

添加示例stackblitz

请指点

谢谢Shruti Nair

Answer 1

你在找x-on:change

<input type="email" class="form-control" x-on:change.debounce="validateEmail($event)" x-model="userEmail" id="email" aria-describedby="emailHelp" placeholder="Enter email">

您还想让函数从$event.target.value读取值

因为您已经有了一个x-model，所以可以将$watch('userEmail', (val) => {})添加到x-init并以这种方式进行验证。

编辑：(基于stackblitz)

• x-data不见了
• 我已经把index.js的所有逻辑都内联了
• https://stackblitz.com/edit/web-platform-alpinejs-prwaeg?file=index.html的分叉式堆栈闪电战

全部构成部分：

<form x-data="{
  userEmail: '',
  validateEmail(event) {
    console.log(event.target.value);
  },
  submit($event) {
    console.log(this.userEmail)
  }
}">
  <input type="email"  class="form-control"
    x-on:change.debounce="validateEmail($event)"
    x-model="userEmail"
    id="email"
    aria-describedby="emailHelp"
    placeholder="Enter email"/>
  <button type="button" x-on:click="submit" class="btn btn-block">
    Submit
  </button>
</form>