跟踪 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

请指导

谢谢 施鲁蒂奈尔

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>