开发者问题收集

Alpine 表达式错误:找不到变量:数据

2022-10-21
634

使用 AlpineJS 我有代码:

  <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() {

          let request = new {
            name: data.name.value,
            email: data.email.value
          }

          console.log(request);

        }
      };
    }
  </script>

当我提交表单时出现错误:

[Warning] Alpine Expression Error: Can't find variable: data

Expression: "submit"

<form x-data="inquiry()" x-on:submit.prevent="submit" method="post">…</form>

我做错了什么?

1个回答

当你引用函数内的变量时,你需要使用 this 关键字... 试试这个:

<script>
   function inquiry() {
     return {
       data: {
         name: { value: "", error: "" },
         email: { value: "", error: "" }
       },
       submit() {

         let request = new {
           name: this.data.name.value,
           email: this.data.email.value
         }

         console.log(request);

       }
     };
   }
 </script>
pthomson
2022-10-21