我有一個 Livewire 組件，如下所示
<div class="mr-3">
<input type="checkbox" name="milestoneMark" value="{{ $milestoneId }}" x-model="milestone" wire:click="mark()">
</div>
組件類有以下代碼
class CheckMilestone extends Component
{
public $milestoneId;
public function mark()
{
$milestone = Milestone::where('id', $this->milestoneId)
->first();
$user = User::where('id', auth()->id())
->first();
$user->milestones()->attach($milestone);
}
public function unMark()
{
$milestone = Milestone::where('id', $this->milestoneId)
->first();
$user = User::where('id', auth()->id())
->first();
$user->milestones()->detach($milestone);
}
public function render()
{
return view('livewire.check-milestone');
}
}
我的要求是mark()未選中復選框時執行方法，并在選中復選框unMark()時執行
我在下面試過但沒有用
<div class="mr-3">
<input type="checkbox" name="milestoneMark" value="{{ $milestoneId }}" x-model="milestone" {!! 'checked' ? wire:click="mark()" : wire:click="unMark()" !!} >
</div>
我嘗試盡可能少地使用 JavaScript，所以如果你可以給我一個沒有 JS 的解決方案，但如果沒有其他方法可以解決這個問題，我可以使用 JS。蒂亞！
uj5u.com熱心網友回復：
你沒有任何東西可以作為你檢查情況的依據。我個人會做以下事情：
class CheckMilestone extends Component
{
public $milestoneId;
public bool $checked = false;
public function processMark()
{
if ($this->checked) {
$this->mark();
} else {
$this->unMark();
}
}
// Rest of your code here
}
<div class="mr-3">
<input type="checkbox" wire:model="checked" wire:change="processMark()" wire:loading.attr="disabled">
</div>
解釋; 我們使用wire:model將復選框的值鏈接到 Livewire 組件。我們用于wire:change檢測當您（取消）選擇復選框時觸發的更改事件，并觸發該processMark方法。我們故意不更改 HTML 以免導致意外行為。我們使用在更新變數wire:loading時添加 disabled 屬性checked，因此我們不能在處理時快速取消選中它。
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/531405.html
上一篇：Laravel自動洗掉相關行