Livewire JavaScript で PHPのクラスメソッドを実行して、その直後にプロパティの値を確認するには？

ショコラ

Livewire JavaScript で PHPのクラスメソッドを実行して、その直後にプロパティの値を確認するには？

以下のように、incメソッド（プロパティの値を変更する）を呼び出した直後に、プロパティの値を確認すると値が更新されていません。
↓↓↓
onClick=”@this.inc(); console.log(@this.value)”

これは incメソッドのプロミスを実行して、then の中で値を確認するようにします。
↓↓↓
onClick=”@this.inc().then(value => console.log(@this.value)).catch(e => console.log(e))”

もっさん先輩

手順

Laravel と Livewire をインストールして、PHPクラスメソッドを実行後にプロパティの値を確認する手順。

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

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

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

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

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

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

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

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

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

source ~/.bashrc

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

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

cd promise && ./vendor/bin/sail up -d

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

sail composer require livewire/livewire

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

sail artisan make:livewire promise

$ sail artisan make:livewire promise
 COMPONENT CREATED  ?

CLASS: app/Http/Livewire/Promise.php
VIEW:  resources/views/livewire/promise.blade.php

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

<?php

namespace App\Http\Livewire;

use Livewire\Component;

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

<div>
    {{-- Success is as dangerous as failure. --}}
</div>

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

<?php

namespace App\Http\Livewire;

use Livewire\Component;

class Promise extends Component
{
}

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

app/Http/Livewire/Promise.php

<?php
namespace App\Http\Livewire;
class Promise extends \Livewire\Component
{
  public $value = 100;
  public function inc() {
    $this->value++;
  }
  public function reset_btn() {
    $this->reset('value');
  }
}

↑１０行目。resetメソッドで値をリセットしています。

resources/views/livewire/promise.blade.php

<div>
  <h1>{{ $value }}</h1>
  <button type="button" class="ui button blue" onClick="@this.inc().then(value => console.log(@this.value)).catch(e => console.log(e))">インクリメント</button>
  <button type="button" class="ui button red" id="reset1">非同期リセット</button>
  <button type="button" class="ui button red" id="reset2">同期リセット</button>
</div>

@push ('scripts')
<script>

// 非同期リセット
document.querySelector('#reset1').addEventListener('click',event => {
  @this.reset_btn();
  console.log(@this.value)
})

// 同期リセット
document.querySelector('#reset2').addEventListener('click',async event => {
  await @this.reset_btn();
  console.log(@this.value)
})

</script>
@endpush

↑ポイント。２行目はプロミスを使って同期後にログを出力しています。
同期処理にはもう１つのやり方があります。１８行目に async を付けて、１９行目に await を付けると同期処理で実行できます。

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:promise />
    </div>
    <livewire:scripts />
    @stack ('scripts')
  </body>
</html>