Passing data from custom field via action to the backend

✅ Solved4️⃣v4

What I am trying to do:
Pass data (UUID mainly) from my custom field component to the backend and then on the backend trigger Modal action with schema and return mutated data. I am making custom hobby CMS project, I want to be able to create grid for the frontend and have lets say two rows 2x2 and pick any component like text/image into each slot.

I am picking it via custom modal action, I want to be able to select the component in the modal (Text block or Image block)

I got the modal "pick your component" thingy working, but I am stuck on how to pass data to the modal and return it back to the blade component

What I did:
Created custom component and modal to display which component I want to pick

My issue/the error:

$getAction('addComponent', ['data' => 'how do i pass data to the action?']) }}

$getAction('addComponent', ['data' => 'how do i pass data to the action?']) }}

I tried this but its not passing any data.

Whats the best way to do feature like this?

Code:

@vite('resources/css/app.css')
<script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>

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

    <div x-data="
    {
        state: $wire.$entangle(@js($getStatePath())),

    }
    "
         x-init="Sortable.create($refs.list,{animation:350})"
    >
    {{ $getAction('addGridColumn') }}

    <span class="bg-red-500" x-text="state.maxCols"></span>
    <div x-ref="list" class="grid gap-2" :style="`grid-template-columns: repeat(${state.maxCols}, minmax(0, 1fr))`">
        <template x-for="(col, index) in state.columns" wire:key="index">
                <div class="justify-center border-1 w-full border-b-gray-100 rounded p-4 gap-2">
                    <p x-text="col.uuid"></p>
                    {{ $getAction('addComponent', ['data' => 'how do i pass data to the action?']) }}
                </div>
        </template>
    </div>
</div>
</x-dynamic-component>

@vite('resources/css/app.css')
<script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>

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

    <div x-data="
    {
        state: $wire.$entangle(@js($getStatePath())),

    }
    "
         x-init="Sortable.create($refs.list,{animation:350})"
    >
    {{ $getAction('addGridColumn') }}

    <span class="bg-red-500" x-text="state.maxCols"></span>
    <div x-ref="list" class="grid gap-2" :style="`grid-template-columns: repeat(${state.maxCols}, minmax(0, 1fr))`">
        <template x-for="(col, index) in state.columns" wire:key="index">
                <div class="justify-center border-1 w-full border-b-gray-100 rounded p-4 gap-2">
                    <p x-text="col.uuid"></p>
                    {{ $getAction('addComponent', ['data' => 'how do i pass data to the action?']) }}
                </div>
        </template>
    </div>
</div>
</x-dynamic-component>

Passing data from custom field via action to the backend

✅ Solved4️⃣v4

$getAction('addComponent', ['data' => 'how do i pass data to the action?']) }}

$getAction('addComponent', ['data' => 'how do i pass data to the action?']) }}

I tried this but its not passing any data.

Whats the best way to do feature like this?

Code:

@vite('resources/css/app.css')
<script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>

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

    <div x-data="
    {
        state: $wire.$entangle(@js($getStatePath())),

    }
    "
         x-init="Sortable.create($refs.list,{animation:350})"
    >
    {{ $getAction('addGridColumn') }}

    <span class="bg-red-500" x-text="state.maxCols"></span>
    <div x-ref="list" class="grid gap-2" :style="`grid-template-columns: repeat(${state.maxCols}, minmax(0, 1fr))`">
        <template x-for="(col, index) in state.columns" wire:key="index">
                <div class="justify-center border-1 w-full border-b-gray-100 rounded p-4 gap-2">
                    <p x-text="col.uuid"></p>
                    {{ $getAction('addComponent', ['data' => 'how do i pass data to the action?']) }}
                </div>
        </template>
    </div>
</div>
</x-dynamic-component>

@vite('resources/css/app.css')
<script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>

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

    <div x-data="
    {
        state: $wire.$entangle(@js($getStatePath())),

    }
    "
         x-init="Sortable.create($refs.list,{animation:350})"
    >
    {{ $getAction('addGridColumn') }}

    <span class="bg-red-500" x-text="state.maxCols"></span>
    <div x-ref="list" class="grid gap-2" :style="`grid-template-columns: repeat(${state.maxCols}, minmax(0, 1fr))`">
        <template x-for="(col, index) in state.columns" wire:key="index">
                <div class="justify-center border-1 w-full border-b-gray-100 rounded p-4 gap-2">
                    <p x-text="col.uuid"></p>
                    {{ $getAction('addComponent', ['data' => 'how do i pass data to the action?']) }}
                </div>
        </template>
    </div>
</div>
</x-dynamic-component>

Passing data from custom field via action to the backend

Passing data from custom field via action to the backend

Similar Threads

Similar Threads

Similar Threads