Livewire で Fomantic-UI の Multiple Selection を使うには？multiple

ショコラ

Livewire で Fomantic-UI の Multiple Selection を使うには？multiple

Fomantic-UI の Multiple Selection の使い方です。

もっさん先輩

手順

Laravel と Livewire をインストールして、Fomantic-UI の Multiple Selection を使う手順。

プロジェクト名（multiple）を決めて以下のコマンドを実行します。

curl -s https://laravel.build/multiple | bash

インストール時にプロジェクト名のディレクトリが作成されます。

インストールの最後に sudo でパスワードの入力を求められます。

↓下のメッセージが表示されてインストールは終わります。

Use 'docker scan' to run Snyk tests against images to find vulnerabilities and learn how to fix them

Get started with: cd multiple && ./vendor/bin/sail up

sail のエイリアスを定義します。

echo "alias sail='[ -f sail ] && sh sail || sh vendor/bin/sail'" >> ~/.bashrc

source ~/.bashrc

Laravel のインストールはここまで。

「sail up」でコンテナを起動します。

cd multiple && sail up -d

ララベルのトップディレクトリで、Livewireパッケージをインストールします。

sail composer require livewire/livewire

次のコマンドを実行して、progressコンポーネントを生成します。

sail artisan make:livewire multiple

$ sail artisan make:livewire multiple
 COMPONENT CREATED  ?

CLASS: app/Http/Livewire/Multiple.php
VIEW:  resources/views/livewire/multiple.blade.php

次の 2つのファイルが生成されます。

<?php

namespace App\Http\Livewire;

use Livewire\Component;

class Multiple extends Component
{
    public function render()
    {
        return view('livewire.multiple');
    }
}

<div>
    {{-- Be like water. --}}
</div>

※因みに、renderメソッドを定義しなくても livewire.multiple は呼び出されます。

<?php

namespace App\Http\Livewire;

use Livewire\Component;

class Multiple extends Component
{
}

生成された multipleコンポーネントのクラスとビューを次のように置き換えます。

app/Http/Livewire/Multiple.php

<?php
namespace App\Http\Livewire;
class Multiple extends \Livewire\Component
{
  public $skills = [];

  public function dehydrate() {
    \Log::debug($this->skills);
  }
}

resources/views/livewire/multiple.blade.php

<div>
  <select wire:model="skills" multiple="" class="ui fluid dropdown {{ $this->id }}">
    <option value="">Skills</option>
    <option value="angular">Angular</option>
    <option value="css">CSS</option>
    <option value="design">Graphic Design</option>
    <option value="ember">Ember</option>
    <option value="html">HTML</option>
    <option value="ia">Information Architecture</option>
    <option value="javascript">Javascript</option>
    <option value="mech">Mechanical Engineering</option>
    <option value="meteor">Meteor</option>
    <option value="node">NodeJS</option>
    <option value="plumbing">Plumbing</option>
    <option value="python">Python</option>
    <option value="rails">Rails</option>
    <option value="react">React</option>
    <option value="repair">Kitchen Repair</option>
    <option value="ruby">Ruby</option>
    <option value="ui">UI Design</option>
    <option value="ux">User Experience</option>
  </select>
</div>

@push ('scripts')
<script>
$('.{{ $this->id }}').dropdown()
</script>
@endpush

resources/views/index.blade.php ファイルを作成します。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.1/dist/jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fomantic-ui@2.9.0/dist/semantic.min.css">
    <script src="https://cdn.jsdelivr.net/npm/fomantic-ui@2.9.0/dist/semantic.min.js"></script>
    <livewire:styles />
  </head>
  <body>
    <div class="ui basic segment">
      <livewire:multiple />
    </div>
    <livewire:scripts />
    @stack ('scripts')
  </body>
</html>