Laravel Blade 组件 onclick 功能

Posted 2023-03-14

【中文标题】Laravel Blade 组件 onclick 功能

【英文标题】：Laravel Blade Component onclick function

【发布时间】：2022-01-16 06:27:27

【问题描述】：

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

【参考方案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>

【讨论】：

感谢您的建议，但我相信来自后端的 livewire 调用，我不喜欢这个功能。因为我认为最好在前端处理这部分而不涉及任何后端调用。

因此，如果您不需要在后端更改数据，请使用某种 Javscript。我将编辑答案并添加一些建议。

我误解了刀片组件的用途，你是对的。 Javascript 是最好的方法。谢谢！