Livewire で Fomantic-UI のProgressを使うには？progress

/ Livewire / By
ショコラ
ショコラ

Livewire で Fomantic-UI のProgressを使うには？progress

Fomantic-UI の Progress のように、wire:model が使えないコントーラー（text、radio、checkbox、select、textarea以外）を使うには、どうしたらいいのでしょうか？第２弾です。
今回はプログレスに挑戦してみたいと思います。

もっさん先輩
もっさん先輩

手順

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

  1. プロジェクト名（progress）を決めて以下のコマンドを実行します。
curl -s https://laravel.build/progress | bash

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

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

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

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

Get started with: cd progress && ./vendor/bin/sail up
  1. sail のエイリアスを定義します。
echo "alias sail='[ -f sail ] && sh sail || sh vendor/bin/sail'" >> ~/.bashrc
source ~/.bashrc

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

  1. 「sail up」でコンテナを起動します。
cd progress && sail up -d
  1. ララベルのトップディレクトリで、Livewireパッケージ をインストールします。
sail composer require livewire/livewire
  1. 次のコマンドを実行して、progressコンポーネント を生成します。
sail artisan make:livewire progress
$ sail artisan make:livewire progress
 COMPONENT CREATED  ?

CLASS: app/Http/Livewire/Progress.php
VIEW:  resources/views/livewire/progress.blade.php

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

<?php

namespace App\Http\Livewire;

use Livewire\Component;

class Progress extends Component
{
    public function render()
    {
        return view('livewire.progress');
    }
}
<div>
    {{-- The Master doesn't talk, he acts. --}}
</div>

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

<?php

namespace App\Http\Livewire;

use Livewire\Component;

class Progress extends Component
{
}
  1. 生成された progressコンポーネント のクラスとビューを次のように置き換えます。

app/Http/Livewire/Progress.php

<?php
namespace App\Http\Livewire;
class Progress extends \Livewire\Component
{
  public $value = 10;
  public $total = 100;

  public function dehydrate() {
    \Log::debug($this->value);
    $this->emit('create',$this->value);
  }

  public function check() {
    $this->value += 3;
    $this->value > 100 && $this->value = 100;
    \Log::debug($this->value);
  }
}

↑デハイドレートで「create」メッセージを送っています。
wire:poll で checkメソッド が呼ばれた後も、デハイドレートを通って createメッセージ を送り、Livewire.on(‘create’ で受け取ります。

resources/views/livewire/progress.blade.php

<div wire:ignore wire:poll="check">
  <div class="ui indicating progress {{ $this->id }}" data-value="{{ $value }}" data-total="{{ $total }}">
    <div class="bar">
      <div class="progress"></div>
    </div>
    <div class="label">Uploading Files</div>
  </div>
</div>

@push ('create')
Livewire.on('create', progress => $('.{{ $this->id }}').progress('set progress',progress))
@endpush

ポイントは１行目の「wire:ignore」で再描画を抑えているところと「wire:poll」で定期的に checkメソッドを呼び出しているところです。

  1. 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:progress />
    </div>
    <livewire:scripts />
<script>
document.addEventListener('livewire:load',() => {
  @stack ('create')
  Livewire.emit('create')
})
</script>
  </body>
</html>
  1. routes/web.php に Livewireコンポーネント のルートを追加します
Route::get('/', fn() => view('index'));
  1. ブラウザで確認します。

wire:model が使えないコントーラーについて、前回は Rating 。今回は Progress に挑戦してみました。Rating を作ったときには、wire:ignore を使わないバージョンも作ってみましたが、今のところ①wire:ignore を使う。②デハイドレートで値を設定するイベントを送る。③値の設定は @push(‘create’) などで共通化する。④livewire:load でイベントを送り値を設定する。で共通化できそうかなと思いました。

以上

Scroll to Top