Level 122
where is your component? I see no Livewire ?
Dec 1, 2022
9
Level 2
Dom Diffing Issues
I have built a simple multi-steps form website to show text on each step using Livewire and Alphine.js, and recently I installed Laravel Breeze so that I can manage the form, but when I include some livewire componenets in the "x-guest-layout", I keep getting the Dom Diffing Issues, and when I remove it which obviously renders the component on the main "app layout", the error disappers. https://laravel-livewire.com/docs/2.x/troubleshooting#dom-diffing-issues I have read the Docs, how can I give an id to that div knowing that my app doesn't have any for loops to render data and I have checked all the if else and div closing.
In conclusion When I try to render a LiveWire Component in the guest layout, it gives me the DOM Diffing error, it happens on wire:click to move to the next step. Example
<x-guest-layout>
<div class="w-4 sm:w-8 h-4 my-1 sm:mr-2 transition ease-in-out hover:translate-x-1">
<input type="radio" name="lang" id="en" value="en" wire:model='language' wire:click='translate' class="hidden">
<label for="en" class="cursor-pointer hover:text-blue-600 flex" @click="showDropdown = ! showDropdown">
<img src="{{URL::asset('images/Flags/English_language.svg')}}" alt="English Language" class="w-4 h-4 object-cover object-center rounded-full cursor-pointer mr-1"><span class="hidden sm:block">EN</span>
</label>
</div>
</x-guest-layout>
Level 2
@Snapey , It doesn't matter what is the component, I have many components and the problem is the same. Here is the Livewire component for the example above
class LangTranslate extends Component
{
public function render()
{
return view('livewire.lang-translate');
}
public string $language = '';
public function translate()
{
App::setLocale($this->language);
session()->put('locale', $this->language);
$this->emit('translate');
return back();
}
}
Other Component that listens for the emit
class OnboardingIntroduction extends Component
{
public string $country = '';
public $currentStep = 1;
protected $listeners = ['translate'];
protected $rules = [
'country' => ['required']
];
public function updated($propertyName)
{
$this->validateOnly(
$propertyName,
[
'country' => ['required']
]
);
}
public function welcomePage()
{
$this->currentStep = 2;
}
public function infoPage()
{
$this->currentStep = 3;
}
public function getCountry()
{
$this->validate([
'country' => ['required'],
]);
session(['country' => $this->country]);
$this->currentStep = 4;
}
public function update($property)
{
$this->validateOnly($property);
}
public function goBack()
{
if ($this->currentStep == 1) {
$this->currentStep = 1;
} else {
$this->currentStep--;
}
}
public function nextStep()
{
$this->currentStep++;
}
public function clearForm()
{
$this->country = '';
$this->currentStep = 1;
}
public string $language = '';
public function translate()
{
Session()->get('locale');
return back();
}
public function render()
{
return view('livewire.onboarding-introduction');
}
}
Level 122
you are not explaining your problem very well
How do you know you have dom-diffing issues?
Level 102
Why is the component inside <x-guest-layout> ? Is it a fullpage component? In that case you set the layout in the component
return view('some-view')->layout('guest.layout');
https://laravel-livewire.com/docs/2.x/rendering-components#custom-layout
1 like
Please or to participate in this conversation.