@snapey

did you remove hidden from subcategory classes? did you try public $category=1; in your component?

Yes I did no value appears

but you still have the dropdown showing? You could describe what you see better.

Screenshot perhaps? With the subcategory select open?

@sinnbeck @snapey There are my categories and subcategories

• https://imgur.com/jea8O1q
• https://imgur.com/LolZsxj

Now When I select `Framework` category => In subcategory it would be shown two subcategory but in my case no value appears. screenshot of image

• when i select the category https://imgur.com/e8ieWjl
• in subcategory https://imgur.com/HOb4Fqg

Edited: Now I refactor the code of this line

return view('livewire.dependentsubcategorydropdown')->withCategories(Category::has('subcategories')->get());

add dd after the query

if(!empty($this->category)) {
            $this->subcategories = Subcategory::where('category_id', $this->category)->get();

dd($this->category, $this->subcategories);

@snapey @sinnbeck In attribute section subcategory value is here

"1"

Illuminate\Database\Eloquent\Collection {#1439 ▼
  #items: array:2 [▼
    0 => App\Subcategory {#1437 ▼
      #fillable: array:2 [▶]
      #with: array:1 [▶]
      #connection: "mysql"
      #table: "subcategories"
      #primaryKey: "id"
      #keyType: "int"
      +incrementing: true
      #withCount: []
      #perPage: 15
      +exists: true
      +wasRecentlyCreated: false
      #attributes: array:6 [▼
        "id" => 2
        "name" => "validation"
        "category_id" => 1
        "deleted_at" => null
        "created_at" => "2020-08-21 17:32:34"
        "updated_at" => "2020-08-21 17:32:34"
      ]
      #original: array:6 [▶]
      #changes: []
      #casts: []
      #classCastCache: []
      #dates: array:1 [▶]
      #dateFormat: null
      #appends: []
      #dispatchesEvents: []
      #observables: []
      #relations: array:1 [▶]
      #touches: []
      +timestamps: true
      #hidden: []
      #visible: []
      #guarded: array:1 [▶]
      #forceDeleting: false
    }
    1 => App\Subcategory {#1436 ▼
      #fillable: array:2 [▶]
      #with: array:1 [▶]
      #connection: "mysql"
      #table: "subcategories"
      #primaryKey: "id"
      #keyType: "int"
      +incrementing: true
      #withCount: []
      #perPage: 15
      +exists: true
      +wasRecentlyCreated: false
      #attributes: array:6 [▼
        "id" => 3
        "name" => "symphony"
        "category_id" => 1
        "deleted_at" => null
        "created_at" => "2020-08-21 17:43:34"
        "updated_at" => "2020-08-21 17:43:34"
      ]
      #original: array:6 [▶]
      #changes: []
      #casts: []
      #classCastCache: []
      #dates: array:1 [▶]
      #dateFormat: null
      #appends: []
      #dispatchesEvents: []
      #observables: []
      #relations: array:1 [▶]
      #touches: []
      +timestamps: true
      #hidden: []
      #visible: []
      #guarded: array:1 [▶]
      #forceDeleting: false
    }
  ]
}

Just curious. What happens if you do this? (removed $this)

@foreach ($subcategories as $subcat)
        <option value="{{$subcat->id}}">{{$subcat->name}}</option>
        @endforeach

@sinnbeck

Just curious. What happens if you do this? (removed $this)

Nothing same result comes

omg

remove $this

        @foreach ($this->subcategories as $subcat)
        <option value="{{$subcat->id}}">{{$subcat->name}}</option>
        @endforeach

should be

        @foreach ($subcategories as $subcat)
        <option value="{{$subcat->id}}">{{$subcat->name}}</option>
        @endforeach

ok too many cooks here.... i'm off

@sinnbeck @snapey I tried this before but same result was occur

@foreach ($subcategories as $subcat) {{$subcat->name}} @endforeach

@snapey Oh I was right? Msyve your article should be updated. I don't use livewire so I wasn't sure (just read some example code). And I will stay out of the discussion if you want to help the rest of the way

@sinnbeck @snapey when I dd the value is show correct value but in blade view it not change the value what was the reason?

I don't see anything that is wrong sadly. It should work now? I can only suggest that you debug some more. Are you perhaps passing an empty subcategories from somewhere else (view or view composer)?

Check that you have correctly included @livewireStyles and @livewireScripts in your layout

The tutorial works perfectly with or without $this-> prefixing the variables so that is not the problem, but I'll remove it from the article for consistency.

@snapey Yes it is inlcuded

<!DOCTYPE html>
<html lang="en">
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="x-ua-compatible" content="ie=edge">

    <title>{{ config('app.name', 'CRM-Role-Management') }}</title>

    <!-- Fonts -->
    <link rel="dns-prefetch" href="//fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">
    <!-- Styles -->
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
    @livewireStyles
    </head>
    <body class="hold-transition sidebar-mini">

        <div class="wrapper">

            @include('includes.common.nav')

            @include('includes.common.sidebar')

            <div class="content-wrapper">

                @yield('content')
            </div>

            <!-- Control Sidebar -->
                @include('includes.common.control-sidebar')
            <!-- /.control-sidebar -->

            @include('includes.common.footer')

        </div>

        <!-- Scripts -->
        <script src="{{ asset('js/app.js') }}"></script>
        <script src="{{ mix('js/popper.js') }}"></script>

        @include('includes.pop-up-messages.message')

        @livewireScripts
    </body>

</html>

Edited: is this correctly added or something I have add under this @livewire('dependentsubcategorydropdown') can I get the code link of your project

with the dd in place a before, you only get the dump when you change the select box?

and the dumped values change if you refresh the page and then choose a different category?

@snapey

the dumped values change if you refresh the page and then choose a different category?

When I choosing the category I got the dumped value and after refresh the page and selecting the different category I got the different value.

So you know the back-end is working, but for some reason the dropdown is not being rendered. Can you re-post the complete view component.

Your blade livewire view must have ONE root element.

@snapey

This is my resources/views/create.blade.php file code

@extends('layouts.master')

@section('content')


<div class="content-header">
<div class="container-fluid">
<div class="row mb-2">
<div class="col-sm-6">
<h1 class="m-0 text-dark">Posts</h1>
</div><!-- /.col -->
</div><!-- /.row -->
</div><!-- /.container-fluid -->
</div>
<!-- /.content-header -->
<section class="content">
<div class="container-fluid">

<div class="card">
<div class="card-header">Create Post
</div>

<div class="card-body">

<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>

</div>
</div>

</div>
</div>
</div>
</section>
@endsection

This is my livewire/dependentsubcategorydropdown.blade.php file

<div class="form-group">
    <label for="category_id">Category</label>
    <select class="form-control @error('category_id') is-invalid @enderror"
            wire:model="category"
            name="category_id"
            id="category">
        <option value="0">Select Category</option>
        @foreach ($categories as $cat)
        <option value="{{$cat->id}}">{{$cat->name}}</option>
        @endforeach
    </select>
    @error('category_id')
    <small class="form-text text-red">{{ $message }}</small>
    @enderror
</div>

<div class="form-group">
    <label for="subcategory_id">SubCategory</label>
    <select class="form-control"
            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>

And this is component code

<?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();
            // dd($this->category, $this->subcategories);
            // dd(count($this->subcategories));
        }
        return view('livewire.dependentsubcategorydropdown')->withCategories(Category::has('subcategories')->get());
    }


}

@snapey sir, I think for now I have to use jquery. I don't know where I did make any mistake or something else. Later will check this issue. @sinnbeck @snapey if you have any solution for this please let me know

And chance the project is on github so we can see the full code?

@sinnbeck @snapey this is the link https://github.com/Neeraj1005/laravel-multiauth-setup/tree/dependentdropdown branch dependentdropdown

Well seems the solution has been said already?

Livewire components MUST have a single root element.

You have two divs

<div>
<div class="form-group">
    <label for="category_id">Category</label>
    <select class="form-control @error('category_id') is-invalid @enderror"
            wire:model="category"
            name="category_id"
            id="category">
        <option value="0">Select Category</option>
        @foreach ($categories as $cat)
        <option value="{{$cat->id}}">{{$cat->name}}</option>
        @endforeach
    </select>
    @error('category_id')
    <small class="form-text text-red">{{ $message }}</small>
    @enderror
</div>

<div class="form-group">
    <label for="subcategory_id">SubCategory</label>
    <select class="form-control"
            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>
</div>

@sinnbeck @snapey shit............ working now :) Now create part is done. Thanks you both @sinnbeck @snapey solving this issue. I think Now I will stuck in edit part.

Please mark the answer by @snapey as best as he spotted the issue first