以下に、シンプルで簡単な手順と共にコード例を示します。
- Livewireコンポーネントの作成: まず、Livewireコンポーネントを作成します。ターミナルで以下のコマンドを実行して、新しいLivewireコンポーネントを生成します。
php artisan make:livewire SelectComponentこれにより、app/Http/Livewire/SelectComponent.phpファイルが作成されます。
- ビューの作成:
Livewireコンポーネントに対応するビューファイルを作成します。
resources/views/livewire/select-component.blade.phpというファイルを作成し、以下のコードを追加します。
<div>
<select wire:model="selectedOption" class="form-select">
<option value="">選択してください</option>
<option value="option1">オプション1</option>
<option value="option2">オプション2</option>
<option value="option3">オプション3</option>
</select>
</div>- Livewireコンポーネントのロジックの追加:
Livewireコンポーネントのロジックを追加します。
app/Http/Livewire/SelectComponent.phpファイルを開き、以下のコードを追加します。
<?php
namespace App\Http\Livewire;
use Livewire\Component;
class SelectComponent extends Component
{
public $selectedOption;
public function render()
{
return view('livewire.select-component');
}
}- ルートの定義:
Livewireコンポーネントを表示するためのルートを定義します。
routes/web.phpファイルを開き、以下のコードを追加します。
Route::get('/select', \App\Http\Livewire\SelectComponent::class);これで、/selectへのアクセスでLivewireコンポーネントが表示されます。
- ページの表示:
Livewireコンポーネントを表示するためのページを作成します。例えば、
resources/views/select.blade.phpというファイルを作成し、以下のコードを追加します。
<!DOCTYPE html>
<html>
<head>
<title>Livewire Bootstrap Select</title>
<link rel="stylesheet" href="{{ mix('css/app.css') }}">
@livewireStyles
</head>
<body>
<livewire:select-component />
<script src="{{ mix('js/app.js') }}"></script>
@livewireScripts
</body>
</html>- ブラウザで確認:
ブラウザで
/selectにアクセスし、LivewireとBootstrapを組み合わせたセレクトボックスが表示されることを確認します。