AlpineJS表单@submit事件中$refs无法访问的问题求助

问题出在你使用了箭头函数作为@submit的回调。箭头函数不会创建自己的this上下文，它的this继承自外部作用域，而非Alpine的组件实例，所以this.$refs.email会返回undefined。

给你三种解决思路：

1. 改用普通函数作为回调 #

普通函数的this会绑定到Alpine组件实例，这样就能正常访问this.$refs：

<form
  @submit.prevent="function() {
    errorMessage = getErrorMessage();
    const invalid = !!errorMessage;
    if (!invalid)
      submit(this.$refs.email.value);
  }"
  <!-- 其余代码不变 -->
>

2. 直接使用全局暴露的$refs变量 #

Alpine会在事件回调中直接暴露$refs变量，不需要通过this访问：

<form
  @submit.prevent="() => {
    errorMessage = getErrorMessage();
    const invalid = !!errorMessage;
    if (!invalid)
      submit($refs.email.value);
  }"
  <!-- 其余代码不变 -->
>

3. 将提交逻辑封装到x-data的方法中（推荐） #

把提交逻辑放到x-data的方法里，统一管理组件行为，避免上下文混淆：

<form
  @submit.prevent="handleSubmit"
  x-data="{
    errorMessage: '', 
    blur() {
      this.errorMessage = this.getErrorMessage();
    },
    getErrorMessage() {
      const result = Iodine.assert(this.$refs.email.value, ['required', 'email']);
      if(!result.valid) {
        return result.error;
      }
      return '';
    },
    handleSubmit() {
      this.errorMessage = this.getErrorMessage();
      const invalid = !!this.errorMessage;
      if (!invalid) {
        submit(this.$refs.email.value);
      }
    }
  }"
>
  <input
    type="text"
    placeholder="Enter email address"
    type="email"
    x-ref="email"
    id="email"
  />
  <p
    x-show="errorMessage"
    x-text="errorMessage"
  ></p>
</form>

内容的提问来源于stack exchange，提问作者user3053415