Livewire with select2

#1

I try a lot of but I am wrong or I dont know how to use or my process was wrong or livewire not work. Please Check this Code.

view/layouts/app.blade.php (master)

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Laravel</title>
    <!-- Bootstrap 4 cdn -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">


    <!-- Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">
    @yield('stylesheet')
    </head>
<body>
@yield('contents')
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" ></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>


@yield('script')
@stack('scripts')

</body>
</html>

welcome.blade.php

@extends('layouts.app')

@section('stylesheet')
    @livewireStyles


    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />


    @endsection

@section('contents')
    <div class="container">

            @livewire('home-page')


    </div>
@endsection
@section('script')
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>
    @livewireScripts

@endsection

livewire files …
home-page.blade.php

<div>
    <div class="row justify-content-center">

    <div class="col-md-12">

        <div class="card">
            <div class="card-header">Select2 Example on livewire</div>
            <div class="card-body">
                <div class="form-group">
                    <label>Minimal</label>
                    <select class="form-control" id="FirstOption" style="width: 100%;" tabindex="-1" aria-hidden="true">
                        <option></option>
                        <option>Alaska</option>
                        <option>California</option>
                        <option>Delaware</option>
                        <option>Tennessee</option>
                        <option>Texas</option>
                        <option>Washington</option>
                    </select> </div> <!-- /.form-group -->
            </div>
        </div>
    {{--/.Col-md-4 --}}

        @if($foo)
                <div class="card">
                    <div class="card-header">Second Option</div>
                    <div class="card-body">
                        <div class="form-group">
                            <label for="exampleInputEmail1">Second</label>
                            <select class="form-control"  id="SecondOption">
                                <option></option>
                                <option value="1">1</option>
                                <option value="2">2</option>
                                <option value="3">3</option>
                                <option value="4">4</option>
                                <option value="5">5</option>
                            </select>
                        </div>
                    </div>
                </div>
            @endif


        @if($second)
            <div class="card">
                <div class="card-header">Third Option</div>
                <div class="card-body">
                    <div class="form-group">
                        <label for="exampleInputEmail1">Third</label>
                        <select class="form-control"  id="ThirdOption">
                            <option></option>
                            <option value="1">1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                            <option value="4">4</option>
                            <option value="5">5</option>
                        </select>
                    </div>
                </div>
    @endif
            </div>
    </div>
</div>

@push('scripts')
    <script>
        $(document).ready(function() {
            $('#FirstOption, #SecondOption, #ThirdOption').select2({
                placeholder: 'Select an option',
            });

            $('#FirstOption').on('change', function (e) {
            @this.set('foo', e.target.value);
            });

            $('#SecondOption').on('change', function (e) {
            @this.set('second', e.target.value);
            });

        });

    </script>
@endpush

HomePage.php

<?php

namespace App\Http\Livewire;

use Livewire\Component;

class HomePage extends Component
{
     public $foo=false;
    public $second=false;
    public $third=false;



    public function render()
    {
        return view('livewire.home-page');
    }
}

Please Make a solutions about it…

#2

I found the solution of this.
Check it. Donot forget to like.