Livewireを使って通常時はテキストとして、クリックした時だけ入力用フォームとして機能するコンポーネントの作成方法について解説します。
今回作成するコンポーネントは、以下のgifのような動きをするコンポーネントです。
通常時はテキストとして表示され、クリック時のみ入力用フォームとして文字を入力できるコンポーネントです。
画面上の表示タイトルなんかで使用する目的などで使えます。
解説
コンポーネントを実装するために追加すべきファイルについて解説していきます。
まず、Livewireクラスコンポーネントとbladeファイルを作成します。
bladeファイルと同時に見て欲しいのですが、bladeファイル上にinputタグとspanタグをフラグである$isEditingで2パターンに表示分けします。
このフラグが編集モードを切り替え、falseでテキスト表示し、テキストをクリックすることでtoggleEdit()が実行されてtrueとなり編集モードとなります。
[app/Http/Livewire/EditableChatText.php]
namespace App\Http\Livewire\;
use Livewire\Component;
class EditableText extends Component
{
public $text;
public $isEditing = false;
public function mount($text)
{
$this->text = $text;
}
public function render()
{
return view('livewire.editable-text');
}
/**
* テキストをクリックで編集モードにする
*
* @return void
*/
public function toggleEdit()
{
$this->isEditing = true;
}
/**
* DB上のテキストを更新する
*
* @return void
*/
public function save()
{
// 以下にモデルの更新処理を追加する
// 編集モードをOFFにする
$this->isEditing = false;
}
}さらに、$text部分には、DB上で保存しているテキストをマウント時に$textプロパティに渡してやり、表示させることもできます。
その値を更新したい場合は、画面上で編集モード時のテキスト入力後にEnterをクリックすると、saveメソッドが処理され、
そこにモデルを操作(更新)する処理を追加すればDB上の値を更新することも可能です。
[resources/views/livewire/editable-text.blade.php]
<div class="text-center">
@if($isEditing)
<input class="text-box" type="text" wire:model="text" wire:keydown.enter="save" wire:blur="save">
@else
<span wire:click="toggleEdit">【 {{ $text }} 】</span>
@endif
</div>クリック時に表示されるinputを入力フォームとしての見た目に装飾します。
.text-box {
border: 1px solid;
background-color: lightgray;
}livewireコンポーネントを任意のbladeファイル上で呼び出せば、今回のコンポーネントが実装できます。
$textはcontrollerなどから渡してやることでDB上の値を画面上に表示させることができます。
<div>
<livewire:editable-text :text="$text" />
</div>