One wire:click event removes icon in different div

#1

Good evening!

I would like to ask a question in terms of strange behaviour: when a wire:click action is triggered, another div on the same hierarchical layer seems to be removed/changed.

What seems to be the problem:

When a wire:click event is fired and the DOM of a element is replaced, the DOM of another element in a div below is somehow mixed up.

Steps to Reproduce:

  1. Take the following code (blade view):

    <div> <div> @if(App\User::find(1)->hasLiked(App\Question::find($question->id))) <button uk-icon="icon: check" wire:click="toogleLikeForUser({{ $question->id }})"></button> @else <button uk-icon="icon: heart" wire:click="toogleLikeForUser({{ $question->id }})"></button> @endif </div> <div> @if(App\User::find(1)->hasBookmarked(App\Question::find($question->id))) <button uk-icon="icon: bookmark" wire:click="toogleBookmarkForUser({{ $question->id }})"></button> @else <button uk-icon="icon: plus" wire:click="toogleBookmarkForUser({{ $question->id }})"></button> @endif </div> </div>

In the Livewire component, I have the following methods

    public function toogleLikeForUser($questionId)
{
	$user = \App\User::find(1);
	$question = \App\Question::find($questionId);

	$user->toggleLike($question);
}

public function toogleBookmarkForUser($questionId)
{
	$user = \App\User::find(1);
	$question = \App\Question::find($questionId);

	$user->toggleBookmark($question);
}

Now when you click the button and toogle the icon to change, the other icon vanishes.

Are you using the latest version of Livewire:

Yes

Do you have any screenshots or code examples:

Unbenannt
Unbenannt742×170 7.05 KB

I am using Uikit (https://getuikit.com/docs/icon) for testing purposes.

Not sure if this is a bug of livewire, Uikit or me not knowing something :slight_smile:

Thanks
Andreas

#2

To start, most people will take one look at unformatted code and move on to the next post. It’s next to impossible to read when it’s one continuous line like that.

<div>
    <div> 
        @if(App\User::find(1)->hasLiked(App\Question::find($question->id))) 
            <button uk-icon="icon: check" wire:click="toogleLikeForUser({{ $question->id }})"></button> 
        @else 
            <button uk-icon="icon: heart" wire:click="toogleLikeForUser({{ $question->id }})"></button> 
        @endif
    </div>
    <div> 
        @if(App\User::find(1)->hasBookmarked(App\Question::find($question->id))) 
            <button uk-icon="icon: bookmark" wire:click="toogleBookmarkForUser({{ $question->id }})"></button> 
        @else 
            <button uk-icon="icon: plus" wire:click="toogleBookmarkForUser({{ $question->id }})"></button> 
        @endif 
    </div>
</div>

First thing to fix is put quotes in your method calls. Change them from
toogleLikeForUser({{ $question->id }})
to
toogleLikeForUser('{{ $question->id }}')

#3

Hi xxdalexx

thanks for your reply. I tried to formatt it as code but somehow I was too dumb for it to work, thank you for pointing that out.

I fixed the ’ but the behaviour is still the same.

Is the problem clear from what I am writing?

Thanks
Andreas

#4

I understand the problem, but based on the code you have posted, I don’t see any other issues. Maybe if you post the entire component and it’s view code, there might be something else causing it.

#5

@andreas, I’m having the same issue with UIKit. I think there are some issues with their JS and Livewire’s JS. I’m using Font Awesome 5 rather than UIKit icons and it seems to have solve the problem :slight_smile:

#6

Thank you @Jean-Da-Rocha, I was planning to use a different framework anyway, will report the bug :slight_smile: