跟踪 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 中的所有逻辑
• 分叉 stackblitz 位于https://stackblitz.com/edit/web-platform-alpinejs-prwaeg?file=index.html

完整组件：

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