Livewire-x-model和wire:model位于同一HTML字段上

Question

我有一个Livewire组件，其中有一个选择表单字段。

我希望字段a(绑定到模型，b(在值更改时显示另一个HTML字段。

我想使用Livewire用于模型绑定和Alpine.js的组合来对字段更改做出反应。

<div
x-data="{ isExtraData : false, display_type : '' }"
x-init="$watch('display_type', () => { isExtraData = display_type != 'text_field' })"
>

我可以在HTML元素上设置适当的值，也可以在下拉菜单中更改值时进行交互，但如果两者都有(如下所示(，则该值不会绑定到select字段。

<select id="display_type" class="form-control mr-2" style="width:auto" wire:model="display_type" x-model="display_type" required>

Answer 1

使用示例：

火线：

class Dropdown extends Component
{
public $showDropdown = false;

public function archive()
{
...
$this->showDropdown = false;
}

public function delete()
{
...
$this->showDropdown = false;
}
}

模板：

<div x-data="{ open: @entangle('showDropdown') }">
<button @click="open = true">Show More...</button>

<ul x-show="open" @click.outside="open = false">
<li><button wire:click="archive">Archive</button></li>
<li><button wire:click="delete">Delete</button></li>
</ul>
</div>

更多：在此处输入链接描述