Livewire3 再スタートです

/ Laravel, Livewire3 / By
ショコラ
ショコラ

Livewire3 再スタートです

もっさん先輩
もっさん先輩
composer create-project laravel/laravel example-app "10.*" --prefer-dist
composer require livewire/livewire

① Livewire の bladeファイルの中身は divタグ で囲む必要がある。これがないと Livewire 動きません。

②ハンドラから次画面を表示する場合は、redirectを使う。

<button type="button" class="ui button" wire:click="forward_screen">次画面</button>
public function forward_screen()
{
  $this->redirect('forward-screen');
}

③テキストフォームを使うやり方

public $content;
<input type="text" wire:model="content">

④入力チェックのやり方

public $name;

public function rules()
{
  return [
    'member_code' => [
      'required',
    ],
  ];
}
public function forward_screen()
{
  $this->validate();
  $this->redirect('forward_screen');
}
<div class="field>
  <label>名前</label>
  <input type="text" wire:model="name">
  @error('name') <span class="error">{{ $message }}</span> @enderror
</div>

⑤チェックフォームを使うやり方

public $hobbieds
    <div class="ui checkbox">
      <input type="checkbox" wire:model="hobbieds" value="coding">
      <label>coding</label>
    </div>
    <div class="ui checkbox">
      <input type="checkbox" wire:model="hobbieds" value="sailing">
      <label>sailing</label>
    </div>
    <div class="ui checkbox">
      <input type="checkbox" wire:model="hobbieds" value="camping">
      <label>camping</label>
    </div>

⑤ドロップダウンを使うやり方

public $hobbieds
    <div class="ui checkbox">
      <input type="checkbox" wire:model="hobbieds" value="coding">
      <label>coding</label>
    </div>
    <div class="ui checkbox">
      <input type="checkbox" wire:model="hobbieds" value="sailing">
      <label>sailing</label>
    </div>
    <div class="ui checkbox">
      <input type="checkbox" wire:model="hobbieds" value="camping">
      <label>camping</label>
    </div>

⑥イベントの送信は emit ではなく dispatch

$this->dispatch('modified')

JavaScript 側でのイベントの受信はこちら

document.addEventListener('livewire:init', () => {
   Livewire.on('modified', (event) => {
    alert('test');
       //
   });
});

以上

Scroll to Top