Hai,
Posting ini akan memberi Anda contoh contoh laravel livewire select2. Anda bisa melihat contoh dropdown laravel livewire select2. Anda akan belajar dropdown livewire laravel dengan pencarian. Kita akan melihat contoh dropdown pencarian livewire laravel. Mari kita lihat contoh di bawah ini select2 laravel contoh livewire.
Beberapa hari yang lalu saya melihat-lihat laravel livewire dan melihat, ada banyak masalah dengan implementasi laravel livewire select2. jadi di sini saya akan memberi Anda contoh langkah demi langkah sederhana dari select2 laravel livewire, Anda dapat menggunakan dengan versi laravel 6, laravel 7 dan laravel 8.
Jadi, mari ikuti langkah berikut dan Anda akan mendapatkan tata letak di bawah ini:
Daftar Isi
Langkah 1: Instal Laravel 8
pertama-tama kita perlu mendapatkan aplikasi Laravel 8 versi baru menggunakan perintah di bawah ini, Jadi buka terminal atau command prompt Anda dan jalankan perintah di bawah ini:
composer create-project --prefer-dist laravel/laravel blogLangkah 2: Instal Livewire
Sekarang di langkah ini, kita hanya akan menginstal livewire ke aplikasi laravel 8 kita menggunakan perintah di bawah ini:
composer require livewire/livewireLangkah 3: Buat Komponen
Sekarang di sini kita akan membuat komponen livewire menggunakan perintah mereka. jadi jalankan perintah di bawah untuk membuat komponen select2.
php artisan make:livewire select2Sekarang mereka membuat fies di kedua jalur:
app/Http/Livewire/Select2.php
resources/views/livewire/select2.blade.phpSekarang kedua file akan kami perbarui seperti di bawah untuk formulir hubungi kami.
app/Http/Livewire/Select2.php
<?php
namespace App\Http\Livewire;
use Livewire\Component;
class Select2 extends Component
{
public $selCity = '';
public $cities = [
'Rajkot',
'Surat',
'Baroda',
];
/**
* Write code on Method
*
* @return response()
*/
public function render()
{
return view('livewire.select2')->extends('layouts.app');
}
}resources/views/livewire/select2.blade.php
<div>
<h1>Laravel Livewire Select2 Example - Medikre.com</h1>
<strong>Select2 Dropdown: {{ $selCity }}</strong>
<div wire:ignore>
<select class="form-control" id="select2" >
<option value="">-- Select City --</option>
@foreach($cities as $city)
<option value="{{ $city }}">{{ $city }}</option>
@endforeach
</select>
</div>
</div>
@push('scripts')
<script>
$(document).ready(function() {
$('#select2').select2();
$('#select2').on('change', function (e) {
var data = $('#select2').select2("val");
@this.set('selCity', data);
});
});
</script>
@endpushLangkah 4: Buat Route
sekarang kita akan membuat satu rute untuk memanggil contoh kita, jadi mari tambahkan route baru ke file web.php seperti di bawah ini:
routes/web.php
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Livewire\Select2;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
Route::get('select2', Select2::class);Langkah 5: Buat File View
Disini, kita akan membuat file blade untuk route form. di file ini kita akan menggunakan @livewireStyles, @livewireScripts. jadi mari tambahkan.
resources/views/layouts/app.blade.php
<!DOCTYPE html>
<html>
<head>
<title>Laravel Livewire Example - Medikre.com</title>
@livewireStyles
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>
</head>
<body>
<div class="container">
@yield('content')
</div>
</body>
@livewireScripts
@stack('scripts')
</html>Sekarang Anda dapat menjalankan menggunakan perintah di bawah ini:
php artisan serveBuka URL di bawah:
localhost:8000/select2Saya harap ini dapat membantu Anda...
livewire laravel dropdown select2 livewire example
andriajah