拉拉威尔火线:改变不会开火

Question

所以我有一个带有多个标签的过滤器。但每当我选择一个"标签"时，它不会触发函数。我把电线放在哪里并不重要：改变，它就是不起作用。

首先我有一个基本的选择下拉列表，但后来我改变了它，这样我就可以选择多个标签进行过滤

刀片代码：

<form >
<div class="multiselect" >
<div class="selectBox" onclick="showCheckboxes()">
<select>
<option>Select an option</option>
</select>
<div class="overSelect" wire:model="tag_id" wire:change="filter"></div>
</div>
<div id="checkboxes" >
@foreach($categories as $category)
<label >
<input type="checkbox" value="{{$category->id}}" /> {{ $category->name}}
</label>
@endforeach
</div>
</div>
</form>

下拉菜单的javascript：

<script>
var expanded = false;

function showCheckboxes() {
var checkboxes = document.getElementById("checkboxes");
if (!expanded) {
checkboxes.style.display = "block";
expanded = true;
} else {
checkboxes.style.display = "none";
expanded = false;

}
}
</script>

下拉菜单的css：

<style>
.multiselect {
width: 200px;
}
.selectBox {
position: relative;
}
.selectBox select {
width: 100%;
font-weight: bold;
}
.overSelect {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
#checkboxes {
display: none;
border: 1px #dadada solid;
}
#checkboxes label {
display: block;
}
#checkboxes label:hover {
background-color: #1e90ff;
}
</style>

在我将下拉菜单更改为多选之前，它曾经工作过

Answer 1

您的wire:model和wire:change不在选择标签上，而是在它下面的div上。将其移动到您的选择标签：

<select wire:model="tag_id" wire:change="filter">
<option>Select an option</option>
</select>
<div class="overSelect"></div>