Livewire - x-model and and wire:model on the same HTML field - laravel-livewire

Question

I have a Livewire component where I have a select form field.
I want the field to a) be bound to the model, and b) have another HTML field show when the value changes.
I want to use a combination of Livewire for model binding and Alpine.js to react to field changes.
<div
x-data="{ isExtraData : false, display_type : '' }"
x-init="$watch('display_type', () => { isExtraData = display_type != 'text_field' })"
>
I can either have the proper value set on the HTML element, OR I can have the interactivity when I change the value in the drop down, but if I have both (as below) then the value isn't bound to the select field.
<select id="display_type" class="form-control mr-2" style="width:auto" wire:model="display_type" x-model="display_type" required>

Answer 1

use sample :
livewire:
class Dropdown extends Component
{
public $showDropdown = false;
public function archive()
{
...
$this->showDropdown = false;
}
public function delete()
{
...
$this->showDropdown = false;
}
}
template :
<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>
more :
enter link description here