Level 122
'match' does not appear anywhere in this code. How can we help?
What is the error exactly?
Apr 30, 2022
4
Level 10
Livewire pagination exception
I have a problem with the livewire pagination it always throws an error if I am going back to the first page. Following exception is thrown
Uncaught TypeError: Cannot read properties of null (reading 'match')
at Directive.value (wire-directives.js:86:45)
at Directive.get (wire-directives.js:58:33)
at node_initializer.js:209:42
at Component.value (index.js:582:9)
at HTMLDivElement.<anonymous> (node_initializer.js:201:23)
blade
@foreach ($companies as $company)
<div wire:click="setModal({{ $company->id }})"
class="mb-3 cursor-pointer bg-white border border-gray-200 shadow-xs md:hover:shadow-md hover:z-10 p-5 md:p-6 flex flex-col md:flex-row md:items-start hover-parent transition-all ease-in-out duration-300">
<div
class="flex flex-col items-center sm:flex-row sm:items-start sm:justify-between w-full md:w-auto">
<div class="w-20 h-20 bg-white">
@if ($company->logo)
<img src="{{ asset($company->logo) }}"
class="rounded-full object-cover w-full h-full bg-white shadow-xs border border-gray-100"
alt="{{ $company->name }} logo" title="logo">
@else
(empty)
@endif
</div>
</div>
<div class="mt-4 md:mt-0 ml-0 md:ml-5 w-full">
<div class="flex flex-row items-start justify-between mb-2 w-full">
<h3 class="text-xl font-medium">
{{ $company->name }}
</h3>
<div
class="flex flex-row space-x-5 items-center md:whitespace-nowrap md:ml-2 relative">
<div>
@if ($company->facebook)
<a href="{{ $company->website }}" x-data x-on:click.stop="">
<svg class="h-5 w-5 text-gray-900" width="24" height="24"
viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"
fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" />
<circle cx="12" cy="12" r="9" />
<line x1="3.6" y1="9" x2="20.4" y2="9" />
<line x1="3.6" y1="15" x2="20.4" y2="15" />
<path d="M11.5 3a17 17 0 0 0 0 18" />
<path d="M12.5 3a17 17 0 0 1 0 18" />
</svg>
</a>
@endif
</div>
<div>
@if ($company->facebook)
<a href="{{ $company->facebook }}" x-data x-on:click.stop="">
<svg class="h-5 w-5 text-gray-900" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round">
<path
d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z" />
</svg>
</a>
@endif
</div>
<div>
@if ($company->twitter)
<a href="{{ $company->twitter }}" x-data x-on:click.stop="">
<svg class="h-5 w-5 text-gray-900" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round">
<path
d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z" />
</svg>
</a>
@endif
</div>
<div>
@if ($company->instagram)
<a href="{{ $company->instagram }}" x-data x-on:click.stop="">
<svg class="h-5 w-5 text-gray-900" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round">
<rect x="2" y="2" width="20" height="20" rx="5" ry="5" />
<path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z" />
<line x1="17.5" y1="6.5" x2="17.51" y2="6.5" />
</svg>
</a>
@endif
</div>
<div>
@if ($company->phone_number)
<a href="tel:{{ $company->phone_number }}" x-data x-on:click.stop="">
<svg class="h-5 w-5 text-gray-900" width="24" height="24"
viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"
fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" />
<path
d="M5 4h4l2 5l-2.5 1.5a11 11 0 0 0 5 5l1.5 -2.5l5 2v4a2 2 0 0 1 -2 2a16 16 0 0 1 -15 -15a2 2 0 0 1 2 -2" />
<path d="M15 6h6m-3 -3v6" />
</svg>
</a>
@endif
</div>
</div>
</div>
<div class="mb-6 flex flex-col">
<div class="flex flex-row items-center flex-wrap gap-x-2 gap-y-2">
<h3 class="text-base font-medium text-gray-900">{{ $company->city }}
</h3>
<div class="flex flex-row items-center">
{{-- svg here --}}
<h4 class="text-base text-gray-900">{{ $company->zip_code }}</h4>
</div>
</div>
<div class="flex flex-row items-center flex-wrap gap-x-2 gap-y-2">
<h3 class="text-base font-medium text-gray-900">{{ $company->street }}
</h3>
<div class="flex flex-row items-center">
{{-- svg here --}}
<h4 class="text-base text-gray-900">{{ $company->street_number }}</h4>
</div>
</div>
</div>
<div class="overflow-hidden">
<div class="mr-2">
<div class="flex flex-row items-center justify-between">
<span
class="inline-flex items-center rounded-full px-3 py-0.5 text-sm font-medium bg-indigo-700 text-white">
{{ $company->type }} </span>
<svg class="h-5 w-5 text-red-500" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round">
<path
d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" />
</svg>
</div>
</div>
</div>
</div>
</div>
<div>
<livewire:search-modal :company="$company" :wire:key="$company->id" />
</div>
@endforeach
component
<?php
namespace App\Http\Livewire;
use App\Models\City;
use App\Models\Company;
use App\Models\User;
use Livewire\Component;
use Livewire\WithPagination;
class Search extends Component
{
use WithPagination;
public $search;
public $sortField;
public $sort = "asc";
protected $queryString = ['search', 'sort'];
public function setModal($companyId)
{
$this->emit('searchModalOpen' . $companyId);
}
public function sortAsc()
{
$this->sort = "asc";
}
public function sortDesc()
{
$this->sort = "desc";
}
public function updatingSearch()
{
$this->resetPage();
}
public function render()
{
return view('livewire.search', [ 'cities' => City::all(),
'companies' => Company::where(function ($query) {
$query->where('name', 'like', '%' . $this->search . '%')
->orWhere('zip_code', 'like', '%' . $this->search . '%')
->orWhere('type', 'like', '%' . $this->search . '%')
->orWhere('city', 'like', '%' . $this->search . '%');
})
->when('name', function ($query) {
$query->orderBy('name', $this->sort);
})->paginate(20),
]);
}
}
Maybe someone knows what to do?
Level 10
@Snapey the error appears if I paginate back to the first page and the full error message in my console is
Uncaught TypeError: Cannot read properties of null (reading 'match')
at Directive.value (wire-directives.js:86:45)
at Directive.get (wire-directives.js:58:33)
at node_initializer.js:209:42
at Component.value (index.js:582:9)
at HTMLDivElement.<anonymous> (node_initializer.js:201:23)
Level 10
more precise it is in the wire-directives.js
parseOutMethodAndParams(rawMethod) {
let method = rawMethod
let params = []
const methodAndParamString = method.match(/(.*?)\((.*)\)/s) //<---- here
Level 10
Solved it! Had to add wire:key="{{ $loop->index }}"
Please or to participate in this conversation.