Laravel Livewire 点击提交

Question

当我们点击离开时，我无法找到与提交更新请求的操作相关的任何信息。像 wire:clickaway = "update( {{ example -> id }} )"

本质上，我试图创建当用户单击标题时会打开一个输入框的效果。而不是当用户点击离开时，它会保存已更新的数据在框中。

现在，我使用 Alpine

当编辑为真时出现一个复选标记图标

<div x-data="{edit : false}"  >

 <h2 @click="edit = true" x-show="edit === false" >{{$example -> title}} </h2>

 <div x-show="edit === true">
  <input name="title"  type="text" placeholder="{{$example -> title}}" wire:model="title"  >
  <i class="bi bi-check "  wire:click="update({{ $example->id }})" @click="edit = false"></i>
 </div>

</div>

我想将其更改为

<div x-data="{edit : false}"  >

 <h2 @click="edit = true" x-show="edit === false" >{{$example -> title}} </h2>

 <input x-show="edit === true" name="title"  type="text" placeholder="{{$example -> title}}" wire:model="title" wire:clickaway="update({{ $example->id }})" @click.away="edit = false" >


</div>

有没有办法使用 Alpine JS @click.away 通过 update({{ $example->id }}) 的提交？

Answer 1

@Dirk Jan 说的就是答案

wire:change="update({{ example -> id }})"

Laravel Livewire 点击提交

Laravel Livewire Click Away to submit

laravel

laravel-livewire

alpine.js