CODEWITHSUNDEEP
javascriptalpine.js
Miguel Moura
Miguel Moura

Reputation: 39374

Alpine Expression Error: Can't find variable: data

Using AlpineJS I have the code:

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

When I submit the form I get the error:

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

Expression: "submit"

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

What am I doing wrong?

Upvotes: 1

Views: 774

Answers (1)

pthomson
pthomson

Reputation: 785

when you refer to variables within the function, you want to use this keyword ... try 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>

Upvotes: 1

Related Questions