x-bind not updating when linked to a getter

[hankhank10]

I have a simple login form on which I am attempting to perform validation.

Everything is working fine except when I try to apply the "disabled" class to the submit button when valid_form = false. Regardless of what I do, the "disabled" class does not apply when it is linked to a getter.

In Alpine DevTools in the browser, the valid_form variable is correctly resolving as "false".

It works fine if I manually set it using alpine to "true" or if I link it to a variable which is set to true, but it breaks if I try to link it to a getter.

The issue persists even if I manually change the valid_form getter to return false.

Have I misunderstood how getters work?

<form method="POST" x-data="login_app()">
    <input
        x-model="email"
        id="email"
        name="email"
        type="email"
        required
        @blur="validate_email()"
        @focus="show_email_error = false"
    >
    <span
        x-cloak
        x-show="show_email_error"
    >Invalid email address</span>

    <input
        x-model="password"
        id="password"
        name="password"
        type="password"
        required
        @blur="validate_password()"
        @focus="show_password_error = false"
    >
    <span
        x-cloak
        x-show="show_password_error"
    >Invalid password</span>

    <button
        type="submit"
        class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:cursor-not-allowed disabled:opacity-60"
        :disabled="!valid_form"
    >Sign in</button>
</form>

<script>

    function email_app() {
        return {
            email_address: "",
            password: "",

            get email_valid() {
                return Iodine.isEmail(this.email_address)
            },

            get password_valid() {
                return this.password.length > 4
            },

            get show_email_error() {
                if (this.email_valid || this.email_address == '') {
                    return false
                } else {
                    return true
                }
            },

            get form_valid() {
                return this.email_valid && this.password_valid
            },

        }
    }

</script>

[SimoTod]

Your example has several typos (email vs email_address, valid_form vs form_valid, etc). Can you create a codepen to look at?

[hankhank10]

Thank you. I found the issue, which was that I was loading the Iodine verification script after Alpine