Laravel Blade 组件onclick函数

Question

是否可以在 blade 组件上从 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}}

基本上，我想要的是当我点击一个按钮时，它会从 blade 组件调用“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>

Laravel Blade 组件onclick函数

Laravel Blade Component onclick function

laravel

laravel-blade