使用AlpineJS提交表单时出现‘Can't find variable: data’错误求助

你的代码存在两个关键问题，导致提交时出现报错：

• submit方法中访问组件属性未使用this
  在组件的submit方法里，要访问自身的data属性，必须通过this来引用当前组件实例。直接写data.name.value会被JS识别为全局变量，自然找不到，这就是错误提示里“Can't find variable: data”的原因。

• 创建request对象时错误使用new关键字
  JS中声明对象字面量不需要加new，new {}属于语法错误，会阻止代码正常执行。

修正后的完整代码 #

<form x-data="inquiry()" x-on:submit.prevent="submit" method="post">
  <div>
    <label>Name</label>
    <input type="text" name="name" x-model="data.name.value">
  </div>
  <div>
    <label>Email</label>
    <input type="text" name="email" x-model="data.email.value">
  </div>
  <div class="action">
    <button>Submit</button>
  </div>
</form>

<script>
  function inquiry() {
    return {
      data: {
        name: { value: "", error: "" },
        email: { value: "", error: "" }
      },
      submit() {
        // 去掉new，用this访问data
        let request = {
          name: this.data.name.value,
          email: this.data.email.value
        }

        console.log(request);
      }
    };
  }
</script>

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