Try type hinting

public function mount(Category $category, Subcategory $subcategory) {

@sinnbeck after this when I select the category the 404 error occurs.

  public function mount(Category $category, Subcategory $subcategory) {
        $this->category = $category;
        $this->subcategory = $subcategory;
    }

https://imgur.com/D6bdTra

@sinnbeck @snapey basically I follow these steps from https://talltips.novate.co.uk/livewire/dynamic-cascading-dropdown-with-livewire this articles but didn't work

that 404 doesn't look like anything related to your code.

Is your site correctly hosted with public as the document root, or do you see public in your routes

Good so that error is fixed? :)

@snapey i didn't get. Basically this project is on my localhost laragon server

Also, you should not need to inject dependencies, you should be passing any preselected category or subcategory into the livewire component from your view ( which you dont show)

ok, what is the url of the page that throws this error

@sinnbeck This error is ErrorException Unresolvable dependency resolving fixed

Good so the error is fixed :)

but dependent dropdown isn't working :(

@snapey This is my resource route

ok, what is the url of the page that throws this error

 Route::group(['namespace' => 'Posts'], function () {
        Route::resource('posts', 'PostController');
    });

Or this is my create.blade.php

 <div class="row">
<div class="col-md-6">
<form method="post" action="{{route('posts.store')}}" enctype="multipart/form-data">
@csrf

<div class="form-group">
<label for="title">Title</label>
<input id="title" class="form-control @error('title') is-invalid @enderror" type="text" name="title">
@error('title')
<small class="form-text text-red">{{ $message }}</small>
@enderror
</div>


@livewire('dependentsubcategorydropdown')

<div class="form-group">
<label>Tags</label>
<select class="select2bs4" name="tags[]" multiple="multiple" data-placeholder="Select a Tag"
style="width: 100%;">
<option value="0">Select tags</option>
@foreach ($tags as $tag)
<option value="{{$tag->id}}">{{$tag->name}}</option>
@endforeach
</select>
@error('tags')
<small class="form-text text-red">{{ $message }}</small>
@enderror
</div>

<div class="form-group">
<label for="body">Description</label>
<textarea id="body" class="form-control @error('body') is-invalid @enderror" name="body" rows="5"></textarea>
@error('body')
<small class="form-text text-red">{{ $message }}</small>
@enderror
</div>

<a name="" id="" class="btn btn-light" href="{{route('posts.index')}}" role="button">Cancel</a>
<button type="submit" class="btn btn-primary float-right">Create</button>

</form>

Can you post the exact url that is giving 404? Open dev tools (f12) and select network tab to see what it opens

@sinnbeck @snapey

• ANd for create this is my route http://acl.test/posts/create
• After inspect and network mode http://acl.test/livewire/message/dependentsubcategorydropdown

@sinnbeck @snapey

Can you post the exact url that is giving 404? Open dev tools (f12) and select network tab to see what it opens

This url I get it http://acl.test/livewire/message/dependentsubcategorydropdown

ok, lets try another approach

since you use the component like this

@livewire('dependentsubcategorydropdown')

you are not passing in any props to the component, so you should completely delete the mount method from your component

@snapey what should I have to do? basically I followed all the steps as you mentioned in this article https://talltips.novate.co.uk/livewire/dynamic-cascading-dropdown-with-livewire

After removing the mount method subcategory value not showing but the url is paased with status 200

Edited This is my create method for PostController

   public function create()
    {
        return view('cms.posts.create',[
            'categories' => Category::get(),
            'tags' => Tag::get(['id','name']),
        ]);
    }

If you plan on using them on an edit page later, you could make them optinal instead

public function mount($category = null, $subcategory = null) {

subcategory is hidden until you set category and have subcategories to display

 <select class="form-control {{ count($this->subcategories)==0 ? 'hidden' : '' }}"

Also, you don't need to pass categories into your create view. The component is self contained and gets its own categories

@sinnbeck but my create method is not working. The subcategory is not popped-up when I select the category, after removig the mount method.

If you plan on using them on an edit page later, you could make them optinal instead public function mount($category = null, $subcategory = null) {

@snapey Yes I removed them

Also, you don't need to pass categories into your create view. The component is self contained and gets its own categories

Did you try adding the mount method back with optional parameters? You might need it later

temporarily change

    public $category=1;

set 1 to a category that you know has sub categories

refresh the page, any change?

@sinnbeck yes added but my basic functionality still not working. when I select the category subcategory value is not popped up. Can you tell me how to fix this. Here I again put my all codes.

Basic part

This is my routes

Route::group(['namespace' => 'Posts'], function () {
        Route::resource('posts', 'PostController');
    });

This is my controler create method

  public function create()
    {
        return view('cms.posts.create',[
            'tags' => Tag::get(['id','name']),
        ]);
    }

this is create blade view

<div class="row">
<div class="col-md-6">
<form method="post" action="{{route('posts.store')}}" enctype="multipart/form-data">
@csrf

<div class="form-group">
<label for="title">Title</label>
<input id="title" class="form-control @error('title') is-invalid @enderror" type="text" name="title">
@error('title')
<small class="form-text text-red">{{ $message }}</small>
@enderror
</div>


@livewire('dependentsubcategorydropdown')

<div class="form-group">
<label>Tags</label>
<select class="select2bs4" name="tags[]" multiple="multiple" data-placeholder="Select a Tag"
style="width: 100%;">
<option value="0">Select tags</option>
@foreach ($tags as $tag)
<option value="{{$tag->id}}">{{$tag->name}}</option>
@endforeach
</select>
@error('tags')
<small class="form-text text-red">{{ $message }}</small>
@enderror
</div>

<div class="form-group">
<label for="body">Description</label>
<textarea id="body" class="form-control @error('body') is-invalid @enderror" name="body" rows="5"></textarea>
@error('body')
<small class="form-text text-red">{{ $message }}</small>
@enderror
</div>

<a name="" id="" class="btn btn-light" href="{{route('posts.index')}}" role="button">Cancel</a>
<button type="submit" class="btn btn-primary float-right">Create</button>

</form>

Livewire Part

component

<?php

namespace App\Http\Livewire;

use App\Category;
use App\Subcategory;
use Livewire\Component;

class Dependentsubcategorydropdown extends Component
{
    public $category;
    public $subcategories = [];
    public $subcategory;

    public function mount($category = null, $subcategory = null) {
        $this->category = $category;
        $this->subcategory = $subcategory;
    }

    public function render()
    {
        if(!empty($this->category)) {
            $this->subcategories = Subcategory::where('category_id', $this->category)->get();
        }
        return view('livewire.dependentsubcategorydropdown')->with('categories',Category::get());
    }
}

Blade

<div class="form-group">
    <label for="category">Category</label>
    <select class="form-control"
            wire:model="category" name="category"
            id="category">
        <option value="0">Select Category</option>
        @foreach ($categories as $cat)
        <option value="{{$cat->id}}">{{$cat->name}}</option>
        @endforeach
    </select>

</div>

<div class="form-group">
    <label for="subcategory_id">SubCategory</label>
    <select class="form-control hidden"
            wire:model="subcategory"
            name="subcategory_id"
            id="subcategory_id">
        <option value="0">select subcategory</option>
        @foreach ($subcategories as $subcat)
        <option value="{{$subcat->id}}">{{$subcat->name}}</option>
        @endforeach
    </select>

</div>

Your subcategory isn't dynamically hidden.

<select class="form-control {{ $this->category ? 'hidden' : '' }}"
wire:model="subcategory"
            name="subcategory_id"
            id="subcategory_id">

Why have you changed your sub category to be permanently hidden?

@sinnbeck Not working It appears and I'm using bootstrap

<div class="form-group">
    <label for="subcategory_id">SubCategory</label>
    <select class="form-control {{ $this->category ? 'hidden' : '' }}"
            wire:model="subcategory"
            name="subcategory_id"
            id="subcategory_id">
        <option value="0">select subcategory</option>
        @foreach ($this->subcategories as $subcat)
        <option value="{{$subcat->id}}">{{$subcat->name}}</option>
        @endforeach
    </select>

</div>

Not working It appears and I'm using bootstrap

How isn't it working? The select appear but is empty? You get an error?

@sinnbeck

How isn't it working? The select appear but is empty? You get an error?

Yes select is appear with empty value and hidden part also not working. I'm confused basically what is going on. And No error is aapear. In network tab status code 200 ok

I edited the article to make it clear that the mount method is only required if you want to pass in previous selections.

Do you want the second dropdown to only appear if there are choices, or hide until choices?

Did you try hard coding the category as suggested?

We are assuming in all this of course that you do actually have valid sub-categories and that your query is actually capable of returning some results.

Next step is to dd the category in the model to make sure its picking up the category choice

@snapey Basically I want to show both dropdown category and subcategory. But In subcategory the value will be popped-up based upon the selected category. lIke country state example Here is my categories https://imgur.com/jea8O1q and subcategories https://imgur.com/LolZsxj table

If you want it to always be shown, just don't hide it. But like @snapey said, you should try debugging what subcategories contain when a category is selected (hardcoded to 1)

<select class="form-control"
            wire:model="subcategory"
            name="subcategory_id"
            id="subcategory_id">

did you remove hidden from subcategory classes?

did you try public $category=1; in your component?