Filament•13mo ago

Liveware inputs not updating state

I’ve a custom form component that is not updating the Livewire state. On load the data is correctly initialised and the fields populated. If I use the Alpine JS tools and update a value (green highlight) the input updates. If I update the input (yellow highlight) the state doesn’t update.

<div
    x-ignore
    ax-load
    ax-load-src="{{ \Filament\Support\Facades\FilamentAsset::getAlpineComponentSrc('braintree-payment') }}"
    x-data="braintreePayment({
        state: {
            clientToken: '{{ $clientToken }}',
            isLoaded: false,
            paymentAttempt: false,
            user: {
                givenName: '{{ $first_name }}',
                surname: '{{ $surname }}'
            }
        }
    })"
>
<div x-show="state.isLoaded && !state.paymentAttempt">
    <div>
        <x-filament-forms::field-wrapper class="rounded-lg" id="name" required="required" label="Name">
            <x-filament::input.wrapper>
                <x-filament::input
                    type="text"
                    x-bind:value="state.user.givenName"
                    required
                />
            </x-filament::input.wrapper>
        </x-filament-forms::field-wrapper>

        <x-filament-forms::field-wrapper class="rounded-lg" id="surname" required="required" label="Surname">
            <x-filament::input.wrapper>
                <x-filament::input
                    type="text"
                    x-bind:value="state.user.surname"
                    required
                />
            </x-filament::input.wrapper>
        </x-filament-forms::field-wrapper>

<div
    x-ignore
    ax-load
    ax-load-src="{{ \Filament\Support\Facades\FilamentAsset::getAlpineComponentSrc('braintree-payment') }}"
    x-data="braintreePayment({
        state: {
            clientToken: '{{ $clientToken }}',
            isLoaded: false,
            paymentAttempt: false,
            user: {
                givenName: '{{ $first_name }}',
                surname: '{{ $surname }}'
            }
        }
    })"
>
<div x-show="state.isLoaded && !state.paymentAttempt">
    <div>
        <x-filament-forms::field-wrapper class="rounded-lg" id="name" required="required" label="Name">
            <x-filament::input.wrapper>
                <x-filament::input
                    type="text"
                    x-bind:value="state.user.givenName"
                    required
                />
            </x-filament::input.wrapper>
        </x-filament-forms::field-wrapper>

        <x-filament-forms::field-wrapper class="rounded-lg" id="surname" required="required" label="Surname">
            <x-filament::input.wrapper>
                <x-filament::input
                    type="text"
                    x-bind:value="state.user.surname"
                    required
                />
            </x-filament::input.wrapper>
        </x-filament-forms::field-wrapper>

import dropIn from "braintree-web-drop-in";

export default function braintreePayment({
      state,
    }) {
    return {
        state,

        init: function () {
            console.log(this.state);
            this.state.isLoaded = true;
            ....

import dropIn from "braintree-web-drop-in";

export default function braintreePayment({
      state,
    }) {
    return {
        state,

        init: function () {
            console.log(this.state);
            this.state.isLoaded = true;
            ....

2 Replies

Ric Le PoidevinOP•13mo ago

fixed image

Ric Le PoidevinOP•13mo ago

Fixed: I need to use x-model="state.user.givenName" not x-bind:value="state.user.givenName" Not sure where I got bind from as wrote it months ago!

Gaming

Programming

Liveware inputs not updating state