Tengo un problema, comencé a usar alpinejs y estoy en proceso de implementar un formulario de registro.

Todo funciona bien excepto por el manejo de errores. Mi archivo php devuelve una identificación única según el error. Dependiendo de la identificación, el texto cambia.

Idealmente, esto es lo que pensé después de la llamada ajax. Cambio x-data: openError a verdadero y err con el texto del error.

Pero no puedo averiguar cómo actualizar los datos x en absoluto.

Sé que uso jquery y Alpinejs no es muy bueno, pero lo cambiaré más tarde

Aquí está mi código:

BLOQUE HTML

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

BLOQUE JS

 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"); } };