Cascading dropdown not updating sub-dropdown (Laravel livewire) - php

Question

I am building search filtering for my site and I am trying to use livewire to build the search component. The search component has a few filters and one of them is a categories dropdown with a subcategories dropdown below it. When a top-level category is selected it should update the subcategories dropdown with the sub-categories of the top-level category. This should happen dynamically without updating the rest of the component, but the actual search results should only be returned when the apply filter button is pressed.
But the subcategories dropdown is not being updated even though if I dd on $this->subcategories I can see the variable has actually been updated. What am I doing wrong here:
<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><i class="fa fa-reorder"></i></li>
</ul>
</div>
</div>
<div class="tg-applyedfilters">
<ul>
<li class="alert alert-dismissable fade in">
×
<span>Manchester</span>
</li>
<li class="alert alert-dismissable fade in">
×
<span>0 - 0</span>
</li>
<li class="alert alert-dismissable fade in">
×
<span>Brand New</span>
</li>
<li class="alert alert-dismissable fade in">
×
<span>Featured Ads</span>
</li>
<li class="alert alert-dismissable fade in">
×
<span>Area Unit: Sq. ft.</span>
</li>
<li class="alert alert-dismissable fade in">
×
<span>Sq. ft. 2500 - Sq. ft.5000</span>
</li>
<li class="alert alert-dismissable fade in">
×
<span>Rooms: 04</span>
</li>
<li class="alert alert-dismissable fade in">
×
<span>2014 - 2016</span>
</li>
<li class="alert alert-dismissable fade in">
×
<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>{{$result->categories->last()->name}}</li>
</ul>
<div class="tg-adtitle">
<h3>{{$result->title}}</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;
use Livewire\Component;
use App\Category;
use App\User;
use App\Advert;
class Listings extends Component
{
public $keyword;
public $categories = [];
public $category;
public $subcategories = [];
public $subcategory;
public $city;
public $postcode;
public $distance;
public $featured;
public $urgent;
public $auction;
public $will_post;
public $results;
public $model;
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');
}
}
I have tried using the updated lifecycle hook for category property change but it still does not work:
public function updatedCategory($value)
{
if($value) {
$this->category = $value;
$this->subcategories = Category::where('parent_id', $this->category)->get();
}
}

Answer 1

could you change the wire:ignore in this line for wire:ignore.self or not use it if isn't necessary ??? i can't figure it out anything else in that code
<div id="tg-narrowsearchcollapse" class="tg-themecollapse tg-narrowsearchcollapse" wire:ignore.self>