级联下拉列表不更新子下拉列表（Laravel livewire）
Cascading dropdown not updating sub-dropdown (Laravel livewire)
我正在为我的网站构建搜索过滤，我正尝试使用 livewire 构建搜索组件。搜索组件有几个过滤器，其中之一是类别下拉列表，其下方有子类别下拉列表。选择顶级类别时，它应该使用顶级类别的子类别更新子类别下拉列表。这应该在不更新组件的其余部分的情况下动态发生，但实际的搜索结果应该只在按下应用过滤器按钮时返回。
但是子类别下拉列表没有更新，即使我在 $this->subcategories 上 dd 我可以看到变量实际上已经更新了。我在这里做错了什么：
<div class="col-xs-12 col-sm-5 col-md-4 col-lg-3">
<aside id="tg-sidebar" class="tg-sidebar">
<form wire:submit.prevent="submitSearch" class="tg-formtheme tg-formnerrowsearch">
<div class="tg-sidebartitle"><h2>Narrow Your Search:</h2></div>
<fieldset>
<div id="tg-narrowsearchcollapse" class="tg-themecollapse tg-narrowsearchcollapse" wire:ignore>
<div class="tg-collapsetitle">
<i class="fa fa-rotate-left"></i>
<span class="fa fa-angle-down">By Title/Keyword</span>
</div>
<div class="tg-themecollapsecontent">
<div class="form-group tg-inputwithicon">
<i class="icon-magnifier"></i>
<input wire:model.defer="keyword" id="keyword" type="search" name="keyword" class="form-control" placeholder="Search Title/Keyword">
</div>
</div>
<div class="tg-collapsetitle">
<i class="fa fa-rotate-left"></i>
<span class="fa fa-angle-down">By Category</span>
</div>
<div class="tg-themecollapsecontent">
<div class="form-group">
<div class="tg-select">
<select wire:model="category" id="category" name="category">
<option disabled>Select Category</option>
@foreach ($categories as $category)
<option value="{{$category->id}}">{{$category->name}}</option>
@endforeach
</select>
</div>
</div>
<div class="form-group">
<div class="tg-selectgroup">
<select wire:model.defer="subcategory" id="subcategory" name="subcategory">
<option disabled>Select Subcategory</option>
@if(count($subcategories) > 0)
@foreach ($subcategories as $subcategory)
<option value="{{$subcategory->id}}">{{$subcategory->name}}</option>
@endforeach
@endif
</select>
</div>
</div>
</div>
<div class="tg-collapsetitle">
<i class="fa fa-rotate-left"></i>
<span class="fa fa-angle-down">By Location</span>
</div>
<div class="tg-themecollapsecontent">
<div class="form-group tg-inputwithicon">
<i class="fa fa-crosshairs"></i>
<input wire:model.defer="city" id="city" type="text" name="city" class="form-control" placeholder="Town/City">
</div>
<div class="form-group tg-inputwithicon">
<i class="fa fa-map-marker"></i>
<input wire:model.defer="postcode"id="postcode" type="text" name="postcode" class="form-control" placeholder="Postcode">
</div>
<div class="form-group">
<div class="tg-select">
<select wire:model.defer="distance" id="radius" name="radius">
<option>Distance</option>
<option value="1">Within 1 mile</option>
<option value="5">Within 5 miles</option>
<option value="10">Within 10 miles</option>
<option value="15">Within 15 miles</option>
<option value="20">Within 20 miles</option>
<option value="25">Within 25 miles</option>
<option value="30">Within 30 miles</option>
<option value="35">Within 35 miles</option>
<option value="40">Within 40 miles</option>
<option value="45">Within 45 miles</option>
<option value="50">Within 50 miles</option>
<option value="55">Within 55 miles</option>
<option value="60">Within 60 miles</option>
<option value="70">Within 70 miles</option>
<option value="80">Within 80 miles</option>
<option value="90">Within 90 miles</option>
<option value="100">Within 100 miles</option>
<option value="150">Within 150 miles</option>
<option value="200">Within 200 miles</option>
<option value="1200">Nationwide</option>
</select>
</div>
</div>
</div>
<div class="tg-collapsetitle">
<i class="fa fa-rotate-left"></i>
<span class="fa fa-angle-down">By Ads Type</span>
</div>
<div class="tg-themecollapsecontent">
<div class="tg-checkboxgroup">
<span class="tg-checkbox">
<input wire:model.defer="featured" type="checkbox" id="tg-featuredads" name="featured" value="1">
<label for="tg-featuredads">
<span>Featured Ads</span>
<span>987327</span>
</label>
</span>
<span class="tg-checkbox">
<input wire:model.defer="urgent" type="checkbox" id="tg-urgentads" name="urgent" value="1">
<label for="tg-urgentads">
<span>Urgent Ads</span>
<span>48952413</span>
</label>
</span>
<span class="tg-checkbox">
<input wire:model.defer="auction" type="checkbox" id="tg-auctionads" name="auction" value="1">
<label for="tg-auctionads">
<span>Auctions</span>
<span>48952413</span>
</label>
</span>
<span class="tg-checkbox">
<input wire:model.defer="will_post" type="checkbox" id="tg-postageads" name="will_post" value="1">
<label for="tg-postageads">
<span>Willing to Post</span>
<span>48952413</span>
</label>
</span>
</div>
</div>
</div>
<button type="submit" class="tg-btn">apply filter</button>
</fieldset>
</form>
</aside>
</div>
<div class="col-xs-12 col-sm-7 col-md-8 col-lg-9">
<div id="tg-content" class="tg-content">
<div class="tg-contenthead">
<div class="tg-sortandview">
<div class="tg-sortby">
<strong>Sort by:</strong>
<div class="tg-select">
<select>
<option value="Most Recent">Most Recent</option>
<option value="Most Recent">Most Recent</option>
<option value="Most Recent">Most Recent</option>
</select>
</div>
</div>
<div class="tg-views">
<strong>View As Grid</strong>
<ul>
<li class="tg-active"><a href="javascript:void(0);"><i
class="fa fa-th-large"></i></a></li>
<li><a href="javascript:void(0);"><i class="fa fa-reorder"></i></a></li>
</ul>
</div>
</div>
<div class="tg-applyedfilters">
<ul>
<li class="alert alert-dismissable fade in">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
<span>Manchester</span>
</li>
<li class="alert alert-dismissable fade in">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
<span>0 - 0</span>
</li>
<li class="alert alert-dismissable fade in">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
<span>Brand New</span>
</li>
<li class="alert alert-dismissable fade in">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
<span>Featured Ads</span>
</li>
<li class="alert alert-dismissable fade in">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
<span>Area Unit: Sq. ft.</span>
</li>
<li class="alert alert-dismissable fade in">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
<span>Sq. ft. 2500 - Sq. ft.5000</span>
</li>
<li class="alert alert-dismissable fade in">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
<span>Rooms: 04</span>
</li>
<li class="alert alert-dismissable fade in">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
<span>2014 - 2016</span>
</li>
<li class="alert alert-dismissable fade in">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
<span>1500 - 3000</span>
</li>
<li><a class="tg-btncleall" href="javascript:void(0);">Clear All</a></li>
</ul>
</div>
</div>
<div class="tg-ads">
<div class="row">
@if(empty($results))
<div class="alert alert-warning">
<strong>Sorry!</strong> No Adverts Found.
</div>
@else
@foreach($results as $result)
<div class="col-xs-6 col-sm-12 col-md-6 col-lg-4 tg-verticaltop">
<div class="tg-ad tg-verifiedad">
<figure>
<span class="tg-themetag tg-featuretag">featured</span>
<a href="{{route('listing.view', $result)}}">
@if(isset($result->images->where('order', '=', 1)->first()->name))
<img src="{{asset ('storage/ad_images/thumbnails/'.$result->images->where('order', '=', 1)->first()->name)}}" title="{{$result->images->where('order', '=', 1)->first()->title}}" alt="{{$result->images->where('order', '=', 1)->first()->alt}}">
@else
@endif
</a>
<span class="tg-photocount">See {{$result->images->count()}} Photos</span>
</figure>
<div class="tg-adcontent">
<ul class="tg-productcagegories">
<li><a href="javascript:void(0);">{{$result->categories->last()->name}}</a></li>
</ul>
<div class="tg-adtitle">
<h3><a href="{{route('listing.view', $result)}}">{{$result->title}}</a></h3>
</div>
<time datetime="2017-06-06">Last Updated: {{\Carbon\Carbon::createFromTimeStamp(strtotime($result->updated_at))->diffForHumans()}}</time>
<div class="tg-adprice"><h4>£{{$result->price}}</h4></div>
<address>
@foreach (json_decode($result->user->addresses->where('id', '=', $result->user_address_id)) as $address)
{{$address->city.' '.$address->post_code}}
@endforeach
</address>
<div class="tg-phonelike">
<a class="tg-btnphone" href="javascript:void(0);">
<i class="icon-phone-handset"></i>
<span data-toggle="tooltip" data-placement="top" title="Show Phone No." data-last="{{$result->user->contacts->where('id', '=', $result->user_contact_id)->first()->mobile}}"><em>Show Phone No.</em></span>
</a>
<span class="tg-like tg-liked"><i class="fa fa-heart"></i></span>
</div>
</div>
</div>
</div>
@endforeach
@endif
</div>
</div>
{{-- <nav class="tg-pagination">
namespace App\Http\Livewire;
使用Livewire\Component；
使用 App\Category；
使用 App\User；
使用 App\Advert;
class 列表扩展组件
{
public $关键词；
public $类别 = [];
public $类别；
public $子类别 = [];
public $子类别；
public $城市；
public $邮政编码；
public $距离；
public $精选；
public $紧急；
public $拍卖；
public$will_post；
public $结果；
public$模型；
public function mount($model, $paginate = '10')
{
$this->model = $model;
$this->paginate = $paginate;
$this->categories = Category::whereNull('parent_id')->get();
$this->subcategories = Category::with('children')->where('parent_id', $this->categories->first()->id)->get();
}
public function submitSearch()
{
$advert = new Advert();
if($this->featured){
$advert = $advert->where('mark_ad_featured', '1');
}
if($this->urgent){
$advert = $advert->where('mark_ad_urgent', '1');
}
if($this->auction){
$advert = $advert->where('is_auction', '1');
}
if($this->auction){
$advert = $advert->where('is_auction', '1');
}
if($this->will_post){
$advert = $advert->where('local_pickup', '0');
}
$advert = $advert->where('status', '1');
$advert->orderBy('updated_at', 'asc');
$this->results = $advert->get();
}
public function render()
{
if(!empty($this->category)) {
$this->subcategories = Category::where('parent_id', $this->category)->get();
}
//dd($this->subcategories);
return view('livewire.listings');
}
}
我已尝试使用更新的生命周期挂钩来更改类别 属性，但它仍然不起作用：
public function updatedCategory($value)
{
if($value) {
$this->category = $value;
$this->subcategories = Category::where('parent_id', $this->category)->get();
}
}
您能否将此行中的 wire:ignore 更改为 wire:ignore.self 或者如果不需要则不使用它？？？我无法弄清楚该代码中的任何其他内容
<div id="tg-narrowsearchcollapse" class="tg-themecollapse tg-narrowsearchcollapse" wire:ignore.self>
我正在为我的网站构建搜索过滤，我正尝试使用 livewire 构建搜索组件。搜索组件有几个过滤器，其中之一是类别下拉列表，其下方有子类别下拉列表。选择顶级类别时，它应该使用顶级类别的子类别更新子类别下拉列表。这应该在不更新组件的其余部分的情况下动态发生，但实际的搜索结果应该只在按下应用过滤器按钮时返回。
但是子类别下拉列表没有更新，即使我在 $this->subcategories 上 dd 我可以看到变量实际上已经更新了。我在这里做错了什么：
<div class="col-xs-12 col-sm-5 col-md-4 col-lg-3">
<aside id="tg-sidebar" class="tg-sidebar">
<form wire:submit.prevent="submitSearch" class="tg-formtheme tg-formnerrowsearch">
<div class="tg-sidebartitle"><h2>Narrow Your Search:</h2></div>
<fieldset>
<div id="tg-narrowsearchcollapse" class="tg-themecollapse tg-narrowsearchcollapse" wire:ignore>
<div class="tg-collapsetitle">
<i class="fa fa-rotate-left"></i>
<span class="fa fa-angle-down">By Title/Keyword</span>
</div>
<div class="tg-themecollapsecontent">
<div class="form-group tg-inputwithicon">
<i class="icon-magnifier"></i>
<input wire:model.defer="keyword" id="keyword" type="search" name="keyword" class="form-control" placeholder="Search Title/Keyword">
</div>
</div>
<div class="tg-collapsetitle">
<i class="fa fa-rotate-left"></i>
<span class="fa fa-angle-down">By Category</span>
</div>
<div class="tg-themecollapsecontent">
<div class="form-group">
<div class="tg-select">
<select wire:model="category" id="category" name="category">
<option disabled>Select Category</option>
@foreach ($categories as $category)
<option value="{{$category->id}}">{{$category->name}}</option>
@endforeach
</select>
</div>
</div>
<div class="form-group">
<div class="tg-selectgroup">
<select wire:model.defer="subcategory" id="subcategory" name="subcategory">
<option disabled>Select Subcategory</option>
@if(count($subcategories) > 0)
@foreach ($subcategories as $subcategory)
<option value="{{$subcategory->id}}">{{$subcategory->name}}</option>
@endforeach
@endif
</select>
</div>
</div>
</div>
<div class="tg-collapsetitle">
<i class="fa fa-rotate-left"></i>
<span class="fa fa-angle-down">By Location</span>
</div>
<div class="tg-themecollapsecontent">
<div class="form-group tg-inputwithicon">
<i class="fa fa-crosshairs"></i>
<input wire:model.defer="city" id="city" type="text" name="city" class="form-control" placeholder="Town/City">
</div>
<div class="form-group tg-inputwithicon">
<i class="fa fa-map-marker"></i>
<input wire:model.defer="postcode"id="postcode" type="text" name="postcode" class="form-control" placeholder="Postcode">
</div>
<div class="form-group">
<div class="tg-select">
<select wire:model.defer="distance" id="radius" name="radius">
<option>Distance</option>
<option value="1">Within 1 mile</option>
<option value="5">Within 5 miles</option>
<option value="10">Within 10 miles</option>
<option value="15">Within 15 miles</option>
<option value="20">Within 20 miles</option>
<option value="25">Within 25 miles</option>
<option value="30">Within 30 miles</option>
<option value="35">Within 35 miles</option>
<option value="40">Within 40 miles</option>
<option value="45">Within 45 miles</option>
<option value="50">Within 50 miles</option>
<option value="55">Within 55 miles</option>
<option value="60">Within 60 miles</option>
<option value="70">Within 70 miles</option>
<option value="80">Within 80 miles</option>
<option value="90">Within 90 miles</option>
<option value="100">Within 100 miles</option>
<option value="150">Within 150 miles</option>
<option value="200">Within 200 miles</option>
<option value="1200">Nationwide</option>
</select>
</div>
</div>
</div>
<div class="tg-collapsetitle">
<i class="fa fa-rotate-left"></i>
<span class="fa fa-angle-down">By Ads Type</span>
</div>
<div class="tg-themecollapsecontent">
<div class="tg-checkboxgroup">
<span class="tg-checkbox">
<input wire:model.defer="featured" type="checkbox" id="tg-featuredads" name="featured" value="1">
<label for="tg-featuredads">
<span>Featured Ads</span>
<span>987327</span>
</label>
</span>
<span class="tg-checkbox">
<input wire:model.defer="urgent" type="checkbox" id="tg-urgentads" name="urgent" value="1">
<label for="tg-urgentads">
<span>Urgent Ads</span>
<span>48952413</span>
</label>
</span>
<span class="tg-checkbox">
<input wire:model.defer="auction" type="checkbox" id="tg-auctionads" name="auction" value="1">
<label for="tg-auctionads">
<span>Auctions</span>
<span>48952413</span>
</label>
</span>
<span class="tg-checkbox">
<input wire:model.defer="will_post" type="checkbox" id="tg-postageads" name="will_post" value="1">
<label for="tg-postageads">
<span>Willing to Post</span>
<span>48952413</span>
</label>
</span>
</div>
</div>
</div>
<button type="submit" class="tg-btn">apply filter</button>
</fieldset>
</form>
</aside>
</div>
<div class="col-xs-12 col-sm-7 col-md-8 col-lg-9">
<div id="tg-content" class="tg-content">
<div class="tg-contenthead">
<div class="tg-sortandview">
<div class="tg-sortby">
<strong>Sort by:</strong>
<div class="tg-select">
<select>
<option value="Most Recent">Most Recent</option>
<option value="Most Recent">Most Recent</option>
<option value="Most Recent">Most Recent</option>
</select>
</div>
</div>
<div class="tg-views">
<strong>View As Grid</strong>
<ul>
<li class="tg-active"><a href="javascript:void(0);"><i
class="fa fa-th-large"></i></a></li>
<li><a href="javascript:void(0);"><i class="fa fa-reorder"></i></a></li>
</ul>
</div>
</div>
<div class="tg-applyedfilters">
<ul>
<li class="alert alert-dismissable fade in">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
<span>Manchester</span>
</li>
<li class="alert alert-dismissable fade in">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
<span>0 - 0</span>
</li>
<li class="alert alert-dismissable fade in">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
<span>Brand New</span>
</li>
<li class="alert alert-dismissable fade in">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
<span>Featured Ads</span>
</li>
<li class="alert alert-dismissable fade in">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
<span>Area Unit: Sq. ft.</span>
</li>
<li class="alert alert-dismissable fade in">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
<span>Sq. ft. 2500 - Sq. ft.5000</span>
</li>
<li class="alert alert-dismissable fade in">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
<span>Rooms: 04</span>
</li>
<li class="alert alert-dismissable fade in">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
<span>2014 - 2016</span>
</li>
<li class="alert alert-dismissable fade in">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
<span>1500 - 3000</span>
</li>
<li><a class="tg-btncleall" href="javascript:void(0);">Clear All</a></li>
</ul>
</div>
</div>
<div class="tg-ads">
<div class="row">
@if(empty($results))
<div class="alert alert-warning">
<strong>Sorry!</strong> No Adverts Found.
</div>
@else
@foreach($results as $result)
<div class="col-xs-6 col-sm-12 col-md-6 col-lg-4 tg-verticaltop">
<div class="tg-ad tg-verifiedad">
<figure>
<span class="tg-themetag tg-featuretag">featured</span>
<a href="{{route('listing.view', $result)}}">
@if(isset($result->images->where('order', '=', 1)->first()->name))
<img src="{{asset ('storage/ad_images/thumbnails/'.$result->images->where('order', '=', 1)->first()->name)}}" title="{{$result->images->where('order', '=', 1)->first()->title}}" alt="{{$result->images->where('order', '=', 1)->first()->alt}}">
@else
@endif
</a>
<span class="tg-photocount">See {{$result->images->count()}} Photos</span>
</figure>
<div class="tg-adcontent">
<ul class="tg-productcagegories">
<li><a href="javascript:void(0);">{{$result->categories->last()->name}}</a></li>
</ul>
<div class="tg-adtitle">
<h3><a href="{{route('listing.view', $result)}}">{{$result->title}}</a></h3>
</div>
<time datetime="2017-06-06">Last Updated: {{\Carbon\Carbon::createFromTimeStamp(strtotime($result->updated_at))->diffForHumans()}}</time>
<div class="tg-adprice"><h4>£{{$result->price}}</h4></div>
<address>
@foreach (json_decode($result->user->addresses->where('id', '=', $result->user_address_id)) as $address)
{{$address->city.' '.$address->post_code}}
@endforeach
</address>
<div class="tg-phonelike">
<a class="tg-btnphone" href="javascript:void(0);">
<i class="icon-phone-handset"></i>
<span data-toggle="tooltip" data-placement="top" title="Show Phone No." data-last="{{$result->user->contacts->where('id', '=', $result->user_contact_id)->first()->mobile}}"><em>Show Phone No.</em></span>
</a>
<span class="tg-like tg-liked"><i class="fa fa-heart"></i></span>
</div>
</div>
</div>
</div>
@endforeach
@endif
</div>
</div>
{{-- <nav class="tg-pagination">
namespace App\Http\Livewire;
使用Livewire\Component； 使用 App\Category； 使用 App\User； 使用 App\Advert;
class 列表扩展组件 { public $关键词； public $类别 = []; public $类别； public $子类别 = []; public $子类别； public $城市； public $邮政编码； public $距离； public $精选； public $紧急； public $拍卖； public$will_post； public $结果； public$模型；
public function mount($model, $paginate = '10')
{
$this->model = $model;
$this->paginate = $paginate;
$this->categories = Category::whereNull('parent_id')->get();
$this->subcategories = Category::with('children')->where('parent_id', $this->categories->first()->id)->get();
}
public function submitSearch()
{
$advert = new Advert();
if($this->featured){
$advert = $advert->where('mark_ad_featured', '1');
}
if($this->urgent){
$advert = $advert->where('mark_ad_urgent', '1');
}
if($this->auction){
$advert = $advert->where('is_auction', '1');
}
if($this->auction){
$advert = $advert->where('is_auction', '1');
}
if($this->will_post){
$advert = $advert->where('local_pickup', '0');
}
$advert = $advert->where('status', '1');
$advert->orderBy('updated_at', 'asc');
$this->results = $advert->get();
}
public function render()
{
if(!empty($this->category)) {
$this->subcategories = Category::where('parent_id', $this->category)->get();
}
//dd($this->subcategories);
return view('livewire.listings');
}
}
我已尝试使用更新的生命周期挂钩来更改类别 属性，但它仍然不起作用：
public function updatedCategory($value)
{
if($value) {
$this->category = $value;
$this->subcategories = Category::where('parent_id', $this->category)->get();
}
}
您能否将此行中的 wire:ignore 更改为 wire:ignore.self 或者如果不需要则不使用它？？？我无法弄清楚该代码中的任何其他内容
<div id="tg-narrowsearchcollapse" class="tg-themecollapse tg-narrowsearchcollapse" wire:ignore.self>