I am facing a problem, I have started using alpinejs and I am in the process of implementing a registration form.

Everything works fine except for error handling. My php file returns a unique ID depending on the error. Depending on the id the text changes.

Ideally this is what I thought after the ajax call I change the x-data: openError to true and err with the text of the error.

But I can't figure out how to update the x-data at all.

I know i use jquery and Alpinejs not really good but i will change that later

Here is my code:

HTML BLOCK

<div class="relative bg-white shadow rounded-lg md:mt-0 w-full sm:max-w-screen-sm xl:p-0 ml-40" x-data="signupForm()">
    <div id="notification" class="absolute bg-red-500 bottom-0 left-0 w-full p-7 rounded-b-lg flex items-center justify-between" x-show="openError">
       <p x-text="err"></p>
       <svg class="h-5 w-5 text-red-400 pointer" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="#fff" aria-hidden="true" x-on:click="open = ! open">
       <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" />
       </svg>
    </div>
<!-- CODE CONTINUE -->
</div>

JS BLOCK

function signupForm() {
  return {
    formData: {
      email: "",
      username: "",
      password: "",
      password_confirm: "",
    },
    openError: false,
    err: "",
    submitForm() {
      $.ajax({
        url: "controllers/signup.php",
        type: "post",
        data: {
          mail: this.formData.email,
          password: this.formData.password,
          username: this.formData.username,
        },
        success: function (response) {
          this.err = error_handler(response);
          console.log(this.err);
// REST OF THE CODE FOR THE SWITCH TO TRUE
        },
      });
    },
  };
}

error_handler = (id) => {
  if (id == 1) {
  } else if (id == 2) {
    return "Email Invalid";
  } else if (id == 3) {
    return "Email already taken";
  } else if (id == 4) {
    return "Username already taken";
  } else if (id == 5) {
    alert("Thank you");
  }
};