Custom form field, how to change the state from x-init?

I have following component and want to change the state from inside the function?

<x-dynamic-component
    :component="$getFieldWrapperView()"
    :field="$field"
>
    <div
        x-data="{ state: $wire.$entangle('{{ $getStatePath() }}') }"
    >
        <input x-model="state" x-ref="test_input" x-init="await doSomething();" />
    </div>

    <script>
        async function doSomething() {
            // How can I change the state from inside here?
        }
    </script>
</x-dynamic-component>

<x-dynamic-component
    :component="$getFieldWrapperView()"
    :field="$field"
>
    <div
        x-data="{ state: $wire.$entangle('{{ $getStatePath() }}') }"
    >
        <input x-model="state" x-ref="test_input" x-init="await doSomething();" />
    </div>

    <script>
        async function doSomething() {
            // How can I change the state from inside here?
        }
    </script>
</x-dynamic-component>

Thanks in advance

1 Reply

LeandroFerreira•4w ago

<div x-data="{
    state: $wire.$entangle('{{ $getStatePath() }}'),
    doSomething() {
        this.state = 'something';
    }
}" x-init="doSomething">
    <input x-model="state" />
</div>

<div x-data="{
    state: $wire.$entangle('{{ $getStatePath() }}'),
    doSomething() {
        this.state = 'something';
    }
}" x-init="doSomething">
    <input x-model="state" />
</div>

Gaming

Programming

Custom form field, how to change the state from x-init?