Laravel Blade 组件 onclick 功能

Question

刀片组件是否可以通过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”变量。这可能吗？

Answer 1

我认为你应该考虑改用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 class="form-check-label" 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>