Debounce x-modelable

[zepfietje]

It seems like currently it's impossible to debounce x-model when used with x-modelable.

I'd like to be able to just use the following to debounce or throttle updating the outer value:

<div x-data="{ outer: '' }">
  <div x-data="{ inner: '' }" x-modelable="inner" x-model.debounce="outer">
  </div>
</div>

If there's any way to make it work, let me know!

[SimoTod]

It depends on how you update inner. Events can be debounced so assuming you are using them to update the modelable property, you can do

<div x-data="{ outer: 0 }">
  <span x-text="outer"></span>
  <div x-data="{ inner: 0 }" x-modelable="inner" x-model="outer">
    <button @click.debounce="inner++">Inc</button>
  </div>
</div>

At the moment, I don't think x-modelable applies any of the x-model modifiers (trim, number, etc).

[zepfietje]

Yeah, but ideally you'd want to add the debounce on the x-model="outer" and just leave the inner value to update instantly as you'd expect from any input.

[SimoTod]

yep, mine was an answer to If there's any way to make it work, let me know!.
I do think that it's generally confusing that x-model modifiers are ignored by x-modelable.

[zepfietje]

Ah fair, but there's still many cases in which that workaround won't work (if you have some complex internal state that needs to be reflected in the inner component's UI directly).

Might be a good feature request to make x-modelable work with modifiers then.

[skeemer]

I'm not so sure this should be a feature request as much as considered a bug. x-model should give the same results whether it is a normal input or x-modelable.