What seems to be the problem:
I got 6 button, whenever i click other button and click back at the first one it stops the process and makes me couldn’t click other buttons too
this is the problem on the console when i click the first button.
Uncaught (in promise) TypeError: Cannot read property ‘$wire’ of undefined
at Livewire.value (index.js:31)
at eval (eval at tryCatch.el.el (app.js:6148), :3:78)
at tryCatch.el.el (app.js:6148)
at tryCatch (app.js:6135)
at saferEval (app.js:6143)
at new Component (app.js:7464)
at app.js:7615
at app.js:7597
at walk (app.js:6098)
at walk (app.js:6102)
Are you using the latest version of Livewire:
Yes, its 2,3.18
Do you have any screenshots or code examples:
This is the code for the frontend
<div class="container mx-auto text-center" x-data="{travel:false, transport:false, tour:false, train:false, entertainment:false, culinary:false}">
{{-- Category --}}
<div class="relative flex justify-between py-10 px-72">
<div>
<div x-on:mouseover="travel = true" x-on:mouseleave="travel = false" wire:click='content(1)' class="relative @if($content == 1 || !isset($content)) bg-seindo @endif flex items-center justify-center p-6 space-x-3 overflow-hidden text-sm font-bold uppercase transform bg-white rounded-full cursor-pointer text-seindo hover:translate-y-1 @if($content != 1 || !isset($content)) active:bg-gray-100 @endif ">
<svg class="h-8 fill-current @if($content == 1 || !isset($content)) text-white @elseif($content != 1 || !isset($content)) text-duaindo @endif" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M505.4 71.4c-6.8 19-18.2 38.9-27.8 48.5l-75.4 75.4 39.6 251.9-64.1 64.1-82-209.5-68.4 68.4-5.6 95.5-45.8 45.8-50.1-103.6-29 29-21.2-21.2 29-29L1 336.7l45.8-45.8 95.5-5.6 67.3-67.3L0 136l64.1-64.1 252 39.6L392.7 35c9.5-9.5 29.4-21 48.4-27.8 27.6-9.9 48.6-8.7 60.8 3.5 12.2 12.1 13.4 33.1 3.5 60.7z"/></svg>
</div>
<div x-cloak x-show.transition.origin.top="travel" class="absolute bottom-0 font-bold -ml-1.5 -mb-1 z-10 w-24 p-2 text-sm leading-tight text-white transform bg-seindo rounded-md shadow-2xl">
Travel
</div>
</div>
<div>
<div x-on:mouseover="transport = true" x-on:mouseleave="transport = false" wire:click='content(2)' class="relative @if($content == 2) bg-seindo @endif flex items-center justify-center p-6 space-x-3 overflow-hidden text-sm font-bold uppercase transform bg-white rounded-full cursor-pointer hover:translate-y-1 @if($content != 2) active:bg-gray-100 @endif ">
<svg class="h-8 fill-current @if($content == 2) text-white @endif @if($content != 2) text-duaindo @endif" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M350.5 288L315 330.7H197L161.4 288z"/><path d="M467 205.7c-13.7-31.3-51.8-117-65.4-128.5-17.6-15-68-23.9-134.9-23.9h-21.3c-66.9 0-117.3 8.9-134.9 23.8C96.8 88.8 58.6 174.5 45 205.8c-31.1 17.7-45 46.5-45 92.9 0 46.2 10.6 86.4 11 88.1 1.2 4.7 5.5 7.9 10.3 7.9v32c0 17.6 14.4 32 32 32h64c17.6 0 32-14.4 32-32V412l5.9 2.9c1.5.8 3.1 1.1 4.8 1.1h192c1.6 0 3.3-.4 4.8-1.1l5.9-3v14.8c0 17.6 14.4 32 32 32h64c17.6 0 32-14.4 32-32v-32c4.8 0 9.1-3.3 10.3-7.9.5-1.7 11-41.9 11-88.1 0-46.4-13.9-75.3-45-93zM124.3 93.5c8.2-7 43-18.8 121.1-18.8h21.3c78.1 0 112.9 11.8 121 18.8 6.6 6.1 29.5 53.1 51.2 101.5-35.8-9.2-95.3-13.6-182.9-13.6S109 185.8 73.1 195c21.7-48.5 44.6-95.4 51.2-101.5zm24.2 251.9c-1.7 4-5.5 6.6-9.9 6.6H25.8c-1-6.4-2-13.6-2.8-21.3h89.9l-33.3-33.3c-6-6-14.2-9.4-22.6-9.4H21.6c.4-7.9 1.4-14.9 2.9-21.3H57c14.3 0 27.6 5.5 37.7 15.6l51.5 51.5c3.1 3 4 7.6 2.3 11.6zm179.7 2.8c-2 2.4-5 3.8-8.2 3.8H192c-3.2 0-6.2-1.4-8.2-3.8l-53.3-64c-2.7-3.2-3.2-7.6-1.5-11.3 1.8-3.8 5.5-6.1 9.7-6.1h234.7c4.1 0 7.9 2.4 9.7 6.1 1.8 3.7 1.2 8.2-1.5 11.3l-53.4 64zM489 330.7c-.8 7.7-1.8 14.9-2.8 21.3H373.3c-4.3 0-8.2-2.6-9.9-6.6-1.6-4-.7-8.6 2.3-11.6l51.5-51.5c10.1-10.1 23.5-15.6 37.7-15.6h32.5c1.5 6.4 2.4 13.5 2.9 21.3H455c-8.4 0-16.7 3.4-22.6 9.4l-33.3 33.3H489z"/></svg>
</div>
<div x-cloak x-show.transition.origin.top="transport" class="absolute bottom-0 font-bold -ml-1.5 -mb-1 z-10 w-24 p-2 text-sm leading-tight text-white transform bg-seindo rounded-md shadow-2xl">
Transport
</div>
</div>
<div>
<div x-on:mouseover="tour = true" x-on:mouseleave="tour = false" wire:click='content(3)' class="relative @if($content == 3) bg-seindo @endif flex items-center justify-center p-6 space-x-3 overflow-hidden text-sm font-bold uppercase transform bg-white rounded-full cursor-pointer hover:translate-y-1 @if($content != 3) active:bg-gray-100 @endif ">
<svg class="h-8 fill-current @if($content == 3) text-white @endif @if($content != 3) text-duaindo @endif" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M503.2 492.4l-120-240c-1.4-2.7-4.1-4.4-7.2-4.4h-79.1l-3.7 16-13.4 57.8c-.8 3.6-4.1 6.2-7.8 6.2s-7-2.6-7.8-6.2L250.8 264l-3.7-16H136c-3 0-5.8 1.7-7.2 4.4l-120 240c-1.2 2.5-1.1 5.4.3 7.8 1.5 2.3 4 3.8 6.8 3.8h480c2.8 0 5.3-1.4 6.8-3.8 1.6-2.4 1.7-5.3.5-7.8zM475.1 472H296v-16h19.4l29.7-52c2.8-5 11-5 13.9 0l12.3 21.5 15.1-15.1c1.7-1.7 4-2.6 6.4-2.3 2.4.2 4.5 1.5 5.9 3.5l29.6 44.4h38.8l8 16zM216 264h16v64c0 2.1-.8 4.2-2.3 5.7L187.3 376l36.7 36.7 66.3-66.3c1.5-1.5 3.5-2.3 5.7-2.3h115.1l8 16H299.3l-69.7 69.7c-1.6 1.6-3.6 2.3-5.7 2.3s-4.1-.8-5.7-2.3l-48-48c-3.1-3.1-3.1-8.2 0-11.3l45.7-45.7V264zm-96.9 43.8l32.9 32.9 32-32V264h16v48c0 2.1-.8 4.2-2.3 5.7l-40 40c-1.6 1.6-3.6 2.3-5.7 2.3s-4.1-.8-5.7-2.3l-34.8-34.8 7.6-15.1zM228.7 488L184 443.3 139.3 488h-22.6l61.7-61.7c3.1-3.1 8.2-3.1 11.3 0l61.7 61.7h-22.7zm48 0l-34.3-34.3c-3.1-3.1-3.1-8.2 0-11.3l64-64c1.5-1.5 3.5-2.3 5.7-2.3h115.1l8 16H315.3l-56 56 40 40h-22.6z"/><path d="M409.1 456h-20.5l-9.2-16.1 11.4-11.3zM370.2 456h-36.4l18.2-31.9zM272 104c-35.3 0-64 28.7-64 64 0 28.7 19.3 54 47 61.6 2.8.8 5 3 5.7 5.9l2.9 12.5 3.7 16 4.7 20.5 4.7-20.5 3.7-16 2.9-12.5c.7-2.9 2.8-5.1 5.7-5.9 27.7-7.6 47-33 47-61.6 0-35.3-28.7-64-64-64zm28.8 102.4l-9.6-12.8c4.4-3.3 8-7.8 10.2-12.8l14.6 6.4c-3.3 7.6-8.6 14.2-15.2 19.2zM304 168c0-17.7-14.3-32-32-32v-16c26.5 0 48 21.5 48 48h-16zM183.1 124.2c-1.4-2.6-4.1-4.2-7.1-4.2h-56v-16h40c2.7 0 5.2-1.3 6.7-3.6l16-24c1.8-2.7 1.8-6.2 0-8.9l-16-24c-1.5-2.2-4-3.6-6.7-3.6h-40V16c0-4.4-3.6-8-8-8H80c-4.4 0-8 3.6-8 8v24H16c-3 0-5.7 1.6-7.1 4.2-1.4 2.6-1.2 5.8.4 8.2l13 19.6-13 19.6c-1.6 2.5-1.8 5.6-.4 8.2 1.4 2.6 4.1 4.2 7.1 4.2h56v16H32c-2.7 0-5.2 1.3-6.7 3.6l-16 24c-1.8 2.7-1.8 6.2 0 8.9l16 24c1.5 2.2 4 3.6 6.7 3.6h40v72c0 4.4 3.6 8 8 8h32c4.4 0 8-3.6 8-8v-72h56c3 0 5.7-1.6 7.1-4.2 1.4-2.6 1.2-5.8-.4-8.2l-13-19.6 13-19.6c1.6-2.5 1.8-5.7.4-8.3zM136 64h16v16h-16V64zm-80 96H40v-16h16v16zm32 0H72v-16h16v16zm16-80V64h16v16h-16zM152 340.7l-32.9-32.9 21.8-43.8H184v44.7zM148.7 408l-80 80H28.9l66.6-133.2zM184 443.3l44.7 44.7h-89.4z"/><path d="M352 424.1l18.2 31.9h-36.4zM390.8 428.6l18.3 27.4h-20.5l-9.2-16.1zM250.8 264l-3.7-16M296.9 248l-3.7 16"/></svg>
</div>
<div x-cloak x-show.transition.origin.top="tour" class="absolute bottom-0 font-bold -ml-1.5 -mb-1 z-10 w-24 p-2 text-sm leading-tight text-white transform bg-seindo rounded-md shadow-2xl">
Tour
</div>
</div>
<div>
<div x-on:mouseover="train = true" x-on:mouseleave="train = false" wire:click='content(4)' class="relative @if($content == 4) bg-seindo @endif flex items-center justify-center p-6 space-x-3 overflow-hidden text-sm font-bold uppercase transform bg-white rounded-full cursor-pointer hover:translate-y-1 @if($content != 4) active:bg-gray-100 @endif ">
<svg class="h-8 fill-current @if($content == 4) text-white @endif @if($content != 4) text-duaindo @endif" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M336.1 40c-5.5 0-10 4.5-10 10s4.5 10 10 10 10-4.5 10-10-4.5-10-10-10zM176.1 40c-5.5 0-10 4.5-10 10s4.5 10 10 10 10-4.5 10-10-4.5-10-10-10z"/><path d="M464 495.1L397.9 426c26.7-1 48.2-23 48.2-50V79.3c0-16.2-5.6-31.9-15.9-44.4s-24.6-21.1-40.5-24.2C354.2 3.6 317.8 0 281.7 0h-52.8c-34.4 0-70.3 3.3-106.5 10.5C89.8 17 66.1 45.9 66.1 79.2V376c0 27.2 21.8 49.4 48.9 50l-67 69c-2.8 2.9-3.6 7.2-2 10.9s5.2 6.1 9.2 6.1h71.5c3.2 0 6.2-1.5 8.1-4.1l30.3-41.9h182.8l30.3 41.9c1.9 2.6 4.9 4.1 8.1 4.1h70.5c4 0 7.6-2.4 9.2-6.1 1.6-3.7.8-7.9-2-10.8zM106 90c0-5.5 4.5-10 10-10h280c5.5 0 10 4.5 10 10v166c0 5.5-4.5 10-10 10H116c-5.5 0-10-4.5-10-10V90zm190 236h-80c-5.5 0-10-4.5-10-10s4.5-10 10-10h80c5.5 0 10 4.5 10 10s-4.4 10-10 10zm10 30c0 5.5-4.5 10-10 10h-80c-5.5 0-10-4.5-10-10s4.5-10 10-10h80c5.6 0 10 4.5 10 10zm-160 20c-22 0-40-17.9-40-40s18-40 40-40c22.1 0 40 17.9 40 40s-17.9 40-40 40zm33.6 70l14.5-20h124.8l14.5 20H179.6zM366 376c-22 0-40-17.9-40-40s18-40 40-40c22.1 0 40 17.9 40 40s-17.9 40-40 40z"/><path d="M266 100h120v146H266zM126 100h120v146H126zM296.1 40h-80c-5.5 0-10 4.5-10 10s4.5 10 10 10h80c5.5 0 10-4.5 10-10s-4.5-10-10-10z"/><circle cx="366" cy="336" r="20"/><g><circle cx="146" cy="336" r="20"/></g></svg>
</div>
<div x-cloak x-show.transition.origin.top="train" class="absolute bottom-0 font-bold -ml-1.5 -mb-1 z-10 w-24 p-2 text-sm leading-tight text-white transform bg-seindo rounded-md shadow-2xl">
Train
</div>
</div>
<div>
<div x-on:mouseover="entertainment = true" x-on:mouseleave="entertainment = false" wire:click='content(5)' class="relative @if($content == 5) bg-seindo @endif flex items-center justify-center p-6 space-x-3 overflow-hidden text-sm font-bold uppercase transform bg-white rounded-full cursor-pointer hover:translate-y-1 @if($content != 5) active:bg-gray-100 @endif ">
<svg class="h-8 fill-current @if($content == 5) text-white @endif @if($content != 5) text-duaindo @endif" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 321.1 321.1"><path d="M321 201c-.8-18.4-4-38.8-8.8-58-4.8-18.4-10.8-35.6-18-48.8-28-49.2-58.4-41.6-94.8-32-11.6 2.8-24 6-36.8 7.2h-4c-12.8-1.2-25.2-4.4-36.8-7.2C85.4 53 55 45 27 94.6c-7.2 13.2-13.6 30.4-18 48.8-4.8 19.2-8 39.6-8.8 58-.8 20.4 1.2 35.2 5.6 45.6 4.4 9.6 10.8 15.6 19.2 18 7.6 2 16.4 1.2 25.6-2.8 15.6-6.4 33.6-20 51.2-36.4 12.4-12 35.6-18 58.8-18s46.4 6 58.8 18c17.6 16.4 35.6 30 51.2 36.4 9.2 3.6 18 4.8 25.6 2.8 8-2.4 14.8-8 19.2-18.4 4.4-10 6.4-24.8 5.6-45.6zm-119.2-75.6c7.7 0 14 6.3 14 14s-6.3 14-14 14-14-6.3-14-14c0-7.8 6.2-14 14-14zm42.4-14.4c0 7.7-6.3 14-14 14s-14-6.3-14-14 6.3-14 14-14 14 6.2 14 14zm-28 56.8c0-7.7 6.3-14 14-14s14 6.3 14 14-6.3 14-14 14c-7.8 0-14-6.3-14-14zm42.4-14.4c-7.7 0-14-6.3-14-14s6.3-14 14-14 14 6.3 14 14-6.3 14-14 14zM69.8 177c-4-3.6-6.4-8.8-6.8-14.4-6-.4-10.8-2.8-14.8-6.8s-6.8-10-6.8-16.4c0-6.4 2.4-12 6.8-16.4l.4-.4c4-3.6 8.8-6 14.4-6.4.4-5.6 3.2-10.8 6.8-14.4 4-4 10-6.8 16.4-6.8 6.4 0 12 2.4 16.4 6.8l.4.4c3.6 3.6 6 8.8 6.4 14 5.6.4 10.4 3.2 14.4 6.8 4 4 6.8 10 6.8 16.4 0 6.4-2.4 12-6.8 16.4-3.6 4-8.8 6.4-14.4 6.8-.4 5.6-3.2 10.4-6.8 14.4-4 4-10 6.8-16.4 6.8-6.4 0-12-2.4-16.4-6.8z"/><path d="M116.2 139.4c0 2.4-.8 4.4-2.4 6-1.6 1.6-3.6 2.4-6 2.4h-5.6c-4 0-7.6 3.2-7.6 7.6v5.2c0 2.4-.8 4.4-2.4 6-1.6 1.6-3.6 2.4-6 2.4s-4.4-.8-6-2.4c-1.6-1.6-2.4-3.6-2.4-6V155c0-4-3.2-7.6-7.6-7.6h-5.6c-2.4 0-4.4-.8-6-2.4-1.2-1.2-2.4-3.2-2.4-5.6 0-2.4.8-4.4 2.4-6l.4-.4c1.6-1.2 3.6-2 5.6-2h5.6c4 0 7.6-3.2 7.6-7.6v-5.6c0-2.4.8-4.4 2.4-6 1.6-1.6 3.6-2.4 6-2.4s4.4.8 6 2.4l.4.4c1.2 1.6 2 3.6 2 5.6v5.6c0 4 3.2 7.6 7.6 7.6h5.6c2.4 0 4.4.8 6 2.4 1.6 1.6 2.4 3.6 2.4 6z"/></svg>
</div>
<div x-cloak x-show.transition.origin.top="entertainment" class="absolute bottom-0 font-bold -ml-6 -mr-0.5 -mb-1 z-10 w-32 p-2 text-sm leading-tight text-white transform bg-seindo rounded-md shadow-2xl">
Entertainment
</div>
</div>
<div>
<div x-on:mouseover="culinary = true" x-on:mouseleave="culinary = false" onclick="location.href='/culinary';" class="relative flex items-center justify-center p-6 space-x-3 overflow-hidden text-sm font-bold uppercase transform bg-white rounded-full cursor-pointer hover:translate-y-1 active:bg-gray-100">
<svg class="h-8 fill-current text-duaindo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 480"><path d="M244.6 160l4.3 56.6h.1l-4.4-56.6z"/><path d="M468 104h-96V8c0-4.4-3.6-8-8-8h-32c-4.4 0-8 3.6-8 8v96h-96c-4.4 0-8 3.6-8 8v40c0 4.4 3.6 8 8 8h16.6l4.4 56.6.9 11.2c5.7 1.5 11.2 3.3 16.6 5.6 7.6 3.2 14.9 7.2 21.8 12l-1.9-28.9 16-1.1 2.9 44.1C327.5 282 340 312.4 340 344c0 4.4-3.6 8-8 8h-.2c10.9 14.1 10.9 33.9 0 48h.2c4.4 0 8 3.6 8 8v32c0 9-3 17.3-8 24-7.3 9.7-18.9 16-32 16h120c4.2 0 7.7-3.2 8-7.4L451.4 160H468c4.4 0 8-3.6 8-8v-40c0-4.4-3.6-8-8-8zm-182.8 96.6l-1.1-16 16-1.1 1.2 16-16.1 1.1z"/><path d="M324 416v24c0 13.3-10.8 24-24 24H44c-13.3 0-24-10.8-24-24v-24h304zM323.6 380.3c-2.1 11.4-12 19.7-23.6 19.7h-55.4l63.8-46.4c10.9 4 17.3 15.3 15.2 26.7zM283.4 352l-63.6 46.3-69.4-46.3zM193.6 400H44c-13.3 0-24-10.8-24-24s10.8-24 24-24h77.6l72 48zM267.8 251.7c-5.3-2.8-10.9-5.1-16.7-6.9-9.8-3.1-20.3-4.8-31.1-4.8h-96c-54.3.1-99.5 41.9-103.7 96h303.4c-2.9-37-24.9-68.2-55.9-84.3zM108 304H92v-16h16v16zm24-32h-16v-16h16v16zm24 32h-16v-16h16v16zm24-32h-16v-16h16v16zm24 32h-16v-16h16v16zm24-32h-16v-16h16v16zm24 32h-16v-16h16v16z"/></svg>
</div>
<div x-cloak x-show.transition.origin.top="culinary" class="absolute bottom-0 font-bold -ml-1.5 -mb-1 z-10 w-24 p-2 text-sm leading-tight text-white transform bg-seindo rounded-md shadow-2xl">
Culinary
</div>
</div>
</div>
@if($content == 1 || !isset($content))
@include('frontend.home.forms.travel')
@elseif($content == 2)
@include('frontend.home.forms.transport')
@elseif($content == 3)
@include('frontend.home.forms.tour')
@elseif($content == 4)
@include('frontend.home.forms.train')
@elseif($content == 5)
@include('frontend.home.forms.entertainment')
@elseif($content == 6)
@include('frontend.home.forms.culinary')
@endif
</div>
and this is the livewire
<?php
namespace App\Http\Livewire;
use Livewire\Component;
class FormsSearch extends Component
{
public $content;
public function content($i) {
$this->content = $i;
}
public function render()
{
return view('livewire.forms-search');
}
}