laravel-livewire - 如何从 Bootstrap 5 下拉列表中更新 livewire $variable？（不选择输入）

Question

我正在寻找有关如何从引导下拉菜单而不是选择输入更新我的 $category 变量的帮助。我的搜索输入工作正常，但不知道如何更新 $category 变量。以前，我使用 jquery 通过数据属性 ( category = $(this).data('category');) 设置类别变量，并通过 ajax 请求将其传递给后端。我现在正在尝试将其转换为使用火线。

注意：由于样式/功能要求，我需要使用下拉菜单而不是选择输入。

任何帮助都将不胜感激。

编辑：我更接近使用以下代码的解决方案，@this但还没有。手动设置@this.category = 'Art'有效，但尝试使用我的dataCategory变量无效。但是，如果我控制台日志，dataCategory我确实看到了正确的值。

<script>
document.addEventListener('livewire:load', function () {
     var dataCategory;
                    
     $("#dropdown-item-1, #dropdown-item-2, #dropdown-item-3, #dropdown-item-4, #dropdown-item-5, #dropdown-item-6").click(function(){
            dataCategory = $(this).data('category');
    });

    // Get the value of the "category" property
    var category = @this.category;
        
    // Set the value of the "category" property
    @this.category = 'Art'; //this works in the sense that the value is passed to the backend
    @this.category = dataCategory //this does not work at all

    // Call the render component action
    @this.render();       
})
</script>

我的html：

<div class="searchContainer" id="searchContainer">
        <p class="posterTopText">ALL POSTERS</p>
        <div class="d-lg-flex" id="insideSearchContainer">
            <div class="dropdown" id="dropdownContainer">
                <button class="btn btn-light dropdown-toggle left-text" type="button" id="categoryDropdown" data-bs-toggle="dropdown" data-bs-auto-close="false" aria-expanded="false">
                Select Category
                </button>
                <ul class="dropdown-menu" id="categoryDropdownMenu" aria-labelledby="categoryDropdown">
                    <li id="dropdown-li-0"><a class="dropdown-item" id="dropdown-item-1" data-category="All Categories">All Categories</a></li>
                    <li id="dropdown-li-1"><a class="dropdown-item" id="dropdown-item-2" data-category="Art">Category One - Art</a></li>
                    <li id="dropdown-li-2"><a class="dropdown-item" id="dropdown-item-3" data-category="Science">Category Two - Science</a></li>
                    <li id="dropdown-li-3"><a class="dropdown-item" id="dropdown-item-4" data-category="Entertainment">Category Three - Entertainment</a></li>
                    <li id="dropdown-li-4"><a class="dropdown-item" id="dropdown-item-5" data-category="Travel">Category Four - Travel</a></li>
                    <li id="dropdown-li-5"><a class="dropdown-item" id="dropdown-item-6" data-category="Technologies">Category Five - Technologies</a></li>
                </ul>

                <button class="btn btn-primary" type="button" id="secondDropdownBtn">&#9660</button>
            </div>
            
            <div class="d-flex" id="searchBoxRow">
                <input wire:model.defer="search" wire:keydown.enter="render" class="form-control mr-sm-2" id="inlineFormInput" val="" type="search" placeholder="Search Posters" aria-label="Search Posters" spellcheck="true">
                <button wire:click="render" class="btn btn-primary" id="posterSearchButton" type="submit">
                    <i class="bi bi-search button-icon"></i>
                    <span class="button-text">Search</span>
                </button>
            </div>
        </div>
    </div>

我的 livewire 组件：

class PosterData extends Component
{
    use WithPagination;

    protected $paginationTheme = 'bootstrap';

    public $search;
    public $category;
    
    public function render()
    {   
        $posters = Poster::searchFilter([$this->search, $this->category])->with('author', 'category', 'country', 'profile')->paginate(10);

        return view('livewire.poster-data', [
            'posters' => $posters,
        ]);
        
    }
}

标签： laravel-livewire