In my application I added a second component to a view only to find an element within the first component would disappear whenever a property in the second component was changed.
I’ve stripped the problem back to its basics in a brand new Laravel app and the unexpected behaviour is still present. Here’s my code:
View:
<!DOCTYPE html>
<html>
<head>
@livewireStyles
</head>
<body>
<livewire:test />
<livewire:test2 />
@livewireScripts
</body>
</html>
Component 1:
<?php
namespace AppLivewire;
use LivewireComponent;
class Test extends Component
{
public function render()
{
return view('livewire.test');
}
}
Component 1 view:
<div>
@if(true)
<strong>First component</strong>
<div wire:transition>
Element <em>with</em> `wire:transition` attribute.
</div>
<div>
Element <em>without</em> `wire:transition` attribute.
</div>
@endif
</div>
Component 2:
<?php
namespace AppLivewire;
use LivewireComponent;
class Test2 extends Component
{
public $value = true;
public function changeValue()
{
$this->value = !$this->value;
}
public function render()
{
return view('livewire.test2');
}
}
Component 2 view:
<div wire:click="changeValue">
@if($value == true)
<div>
<button>Second component.</button>
</div>
@endif
</div>
Whenever the ‘changeValue’ method is run the element in component 1 with the wire:transition attribute disappears.
I’ve created a quick repo with a vanilla Laravel install to show the problem here: https://github.com/jolora/livewire-bug