get updated property value in view form field

In the simple page I have a public property public int $strengthScore = 0; I set it using the $set method.

TextInput::make('password')
  ->live()
  // other rules
  ->hintAction(
      Action::make('generate')
          ->label('Generate')
          ->action(function (Set $set, Get $get) {
              $password = Str::password(12);
              $set('password', $password);
              $set('passwordConfirmation', $password);
              $set('strengthScore', (new Zxcvbn())->passwordStrength($password)['score']);
          }),
  );

TextInput::make('password')
  ->live()
  // other rules
  ->hintAction(
      Action::make('generate')
          ->label('Generate')
          ->action(function (Set $set, Get $get) {
              $password = Str::password(12);
              $set('password', $password);
              $set('passwordConfirmation', $password);
              $set('strengthScore', (new Zxcvbn())->passwordStrength($password)['score']);
          }),
  );

But how to get strengthScore value in the ViewField after it is updated? Tried $wire.$entangle in the x-data but it get only the initial value.

<div x-data="{ strengthScore: $wire.$entangle('strengthScore', live = true) }">
    <progress value="{{ $this->strengthScore }}" max="4" class="w-full"></progress>
</div>

<div x-data="{ strengthScore: $wire.$entangle('strengthScore', live = true) }">
    <progress value="{{ $this->strengthScore }}" max="4" class="w-full"></progress>
</div>

Solution:

Sending event: ```php $score = (new Zxcvbn())->passwordStrength($password)['score']; $set('strengthScore', $score); $this->dispatch('update-score', score: $score);...

Jump to solution

7 Replies

Patrick Boivin•16mo ago

Not sure but if I'm reading this correctly, you could bind the value attribute to the Alpine state instead of the Livewire state:

<progress x-bind:value="strengthScore" max="4" class="w-full"></progress>

<progress x-bind:value="strengthScore" max="4" class="w-full"></progress>

krekasOP•16mo ago

that's not the issue. solved it by using events

Patrick Boivin•16mo ago

That's great. Can you share a bit more info on your solution? Maybe it can be useful for other people in the same situation?

Solution

krekas•16mo ago

Sending event:

$score = (new Zxcvbn())->passwordStrength($password)['score'];
$set('strengthScore', $score);
$this->dispatch('update-score', score: $score);

$score = (new Zxcvbn())->passwordStrength($password)['score'];
$set('strengthScore', $score);
$this->dispatch('update-score', score: $score);

krekasOP•16mo ago

and in the blade

<div
        x-data="{ strengthScore: 0 }"
        @update-score.window="strengthScore = $event.detail.score"
>
    <progress :value="strengthScore" max="4" class="w-full"></progress>

</div>

<div
        x-data="{ strengthScore: 0 }"
        @update-score.window="strengthScore = $event.detail.score"
>
    <progress :value="strengthScore" max="4" class="w-full"></progress>

</div>

Patrick Boivin•16mo ago

Very cool! Thanks for sharing @krekas

krekasOP•16mo ago

Gaming

Programming

get updated property value in view form field