Replies: 4 comments 3 replies
-
You don't set it in entangle itself, you wrap value synchronization with a custom debounce. E.g. using lodash https://lodash.com/docs/4.17.15#debounce You can then have two properties inside x-data - one real time with x-model on it, and another one entangled. Then sync them with watch or events are wrap the synchronization function in debounce closure. |
Beta Was this translation helpful? Give feedback.
-
Alpine has it's own native debounce you can use, I did something similar recently but I could only do it having a separate Alpine variable. I'm sure someone cleverer could do this in a one-liner. <div class="relative flex justify-between {{ $this->class ?? null }}" x-data="{
quantity: @entangle('quantity').live,
tempQuantity: {{ $quantity }},
init () {
$watch('tempQuantity', Alpine.debounce(() => this.quantity = this.tempQuantity, 200))
},
increase() {
this.tempQuantity++
},
decrease() {
this.tempQuantity--
if (this.tempQuantity < 0) {
this.tempQuantity = 0
}
}
}">
<div class="flex items-center">
<span x-on:click.prevent="decrease" class="flex px-1 py-1 items-center cursor-pointer">
<x-icons.minus />
</span>
<label for="quantity" class="sr-only">Quantity</label>
<input
x-model="tempQuantity"
type="number"
step="1"
min="0"
name="tempQuantity"
class="w-8 min-w-0 text-center text-sm bg-transparent"
/>
<span x-on:click.prevent="increase" class="flex px-1 py-1 items-center cursor-pointer">
<x-icons.plus />
</span>
</div>
<input
x-model="quantity"
type="number"
step="1"
min="0"
name="quantity"
class="hidden"
/>
</div>
|
Beta Was this translation helpful? Give feedback.
-
This can be achieved by debouncing the model binding, and applying <div x-data="{
searchQuery: $wire.entangle('searchQuery').live,
}"
>
<input type="text"
x-model.debounce.750ms="searchQuery"
/>
</div> |
Beta Was this translation helpful? Give feedback.
-
Hi I was able to achieve a debounced sync using the following one liner:
It combines the following two aspects :
And this:
|
Beta Was this translation helpful? Give feedback.
-
How can we set the debounce amount in $wire.entangle?
Beta Was this translation helpful? Give feedback.
All reactions