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.

Filament•2y ago•

2 replies

Xavi

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.

Custom field with alpinejs function

Similar Threads

Custom field with alpinejs function

Similar Threads

Similar Threads

Similar Threads