Refresh section of component until data update

#1

What seems to be the problem:

I have a list of blocks, an ‘add block’ button and a menu to choose a block type to add to the list of blocks. I want to ignore refreshing the list of blocks until a new block has been added to the list. How can i achieve that with the code down below? wire:ignore is a nice way of stopping refreshing a part of the template, but how do i force refresh it when updated?

Steps to Reproduce:

<div>
    <div wire:ignore>
        @foreach($blocks as $block)
            <p>{{ $block->name }}</p>
        @endforeach
    </div>
    <button wire:click.prevent="$set('showBlockTypeMenu', true)">Add Block</button>
    @if($showBlockTypeMenu)
        <div>
            @foreach($blockTypes as $blockTypeHandle => $blockTypeName)
                <button wire:click.prevent="addBlock($blockTypeHandle)">{{ $blockTypeName }}</button>
            @endforeach
        </div>
    @endif
</div>

Are you using the latest version of Livewire:

Yes

Do you have any screenshots or code examples:

See code above.

#2

Hi,
you can try to create a separate component for listing the blocks and emit an event to that component with the updated data when need it .

Make a component for this
in the component add a event listener to update data only when you need it

@foreach($blocks as $block)

{{ $block->name }}

@endforeach

any question if you want to know how to use event listener you can ask.
check here the docs events https://laravel-livewire.com/docs/2.x/events

1 Like
#3

Of course … why didn’t i think of that! Thanks a lot :slight_smile:

1 Like