Filament•2mo ago

Custom field with alpinejs function

Hello, I'm trying to create a custom field using Alpine.js code. I've created a simple example to learn how to do this, but it's not working. This is my custom field code:

php 
<x-dynamic-component
    :component="$getFieldWrapperView()"
    :field="$field"
>

    <div
        x-data="{ state: $wire.$entangle('{{ $getStatePath() }}') }"
    >
        <button
            @click="hello()"
        >
            Add
        </button>
    </div>
</x-dynamic-component>

php 
<x-dynamic-component
    :component="$getFieldWrapperView()"
    :field="$field"
>

    <div
        x-data="{ state: $wire.$entangle('{{ $getStatePath() }}') }"
    >
        <button
            @click="hello()"
        >
            Add
        </button>
    </div>
</x-dynamic-component>

I've added the hello function in app.js:

js 
window.hello = function hello() {
    console.log("Hello world!");
}

js 
window.hello = function hello() {
    console.log("Hello world!");
}

However, the console shows that the hello function is not defined. How can I make this work without putting the function directly in the x-data block? The function will be quite large. Thanks.

1 Reply

AlizHarb•2mo ago

Hey You have to create a custom js then use the command to share it! Hope that will work for you!

Gaming

Programming

Custom field with alpinejs function