刀片組件是否可以從 onclick 呼叫函式并更改其變數值？
public $rental = true;
/**
* Create a new component instance.
*
* @return void
*/
public function __construct()
{
//
}
/**
* Get the view / contents that represent the component.
*
* @return \Illuminate\Contracts\View\View|\Closure|string
*/
public function render()
{
return view('components.product-rental');
}
public function toggleRental(){
$this->rental = !$this->rental;
} <div class="row">
<div class="col col-md-6">
<div class="form-check form-switch">
<input class="form-check-input" name="rental" type="checkbox" @click="toggleRental()" id="rental" value="1" checked>
<label class="form-check-label" for="rental">Rental</label>
</div>
</div>
</div>
{{$rental}}基本上，我想要的是當我點擊一個按鈕時，它會從刀片組件呼叫“toggleRental()”函式并更新“$rental”變數。這可能嗎？
uj5u.com熱心網友回復：
我認為您應該考慮改用Livewire。
它提供的正是這種功能。
否則，您應該實作 API 端點并使用 Javascript 來執行此操作。
編輯：
所以你可以使用這樣的東西：
<div class="row">
<div class="col col-md-6">
<div class="form-check form-switch">
<input class="form-check-input" name="rental" type="checkbox" data-rental="{{ $rental }}" onclick="toggleRental" id="rental" value="1" checked>
<label hljs-string">" for="rental">Rental</label>
</div>
</div>
</div>
{{$rental}}
<script>
document.addEventListener('DOMContentLoaded', (event) => {
var rentalCheckBox = document.querySelector('#rental');
rentalCheckBox.value = rentalCheckBox.getAttribute('data-rental');
function toggleRental(){
rentalCheckBox.value = !rentalCheckBox.value;
}
});
</script>
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/379618.html