Allow exposing multiple variables through x-modelable

[calebdw]

Hello!

x-modelable is so useful, but there's been several times where I would like to expose multiple variables in my components, but have not been able to.

Thanks!

[ekwoka]

How would you envision the API for it working?

it might actually be already possible to use descructuring. like make both x-modelable and x-model an array

[joshhanley]

It would be handy to have this feature. I wonder whether it could be like Vue's multiple v-model binding syntax? https://vuejs.org/guide/components/v-model.html#multiple-v-model-bindings

I'd imagine that x-modelable doesn't need a suffix added as you could just have multiple of them on an element or an array like @ekwoka suggested. Like x-modelable="count" x-modelable="open" or x-modelable="[count, open]".

Where as the x-model could append the property name exposed from modelable using similar syntax to Vue x-model:count="number".

Using the current x-modelable example with multiple properties.

<div x-data="{ number: 5, show: false }" >
    <div
        x-data="{ count: 0, open: true }" x-modelable="[count, open]" x-model:count="number" x-model:open="show">
        ...
    </div>
 
    ...
</div>

I think I prefer the array syntax for x-modelable but I think x-model shouldn't use an array as you need to tell it which x-modelable prop to bind to which outer scope prop, so I personally like the verbosity.

And for backwards compatibility, if x-model is used without a prop name, it just binds to the first prop exposed by x-modelable array.

Having everything together in the example seems strange without a component framework around it. So here's what an example would look like using Laravel's blade template, say using an autocomplete or combo box, where you need access to the selected item and the input value

So this would be our autocomplete component template autocomplete.blade.php:

{{-- In blade `{{ $attributes }}` echos out any attributes passed into the component onto the element --}}
<div x-data="{ id: null, value: null}" x-modelable="['id', 'value']" {{ $attributes }}>
    <input type="text" x-model="value" />
    
    <ul>
        <li x-on:click="id = 1">Option 1</li>
        <li x-on:click="id = 2">Option 2</li>
    </ul>
</div>

And this is how we'd use it

<div x-data="{ userId: null, name: null }">
    <x-autocomplete x-model:id="userId" x-model:value="name" />
</div>

[schniper]

As an alternative, I was trying to extract a component from a body of code. A modal, to be exact.
I have the x-model bound to a bool, controlling its visibility. Then, I needed a couple of variables to hold some data.
While I can access the properties from the parent / calling scope, I wanted to go using a separated scope approach.

So, I have bound the extra attributes to the dataset: x-bind:data-row="activeRow" x-bind:data-col="activeCol" (active row and column in a grid).
Now, on the child component side, I have:
x-data="{ isOpen: false, row: null, col: null }" x-init="$watch('$el._x_bindings', (v) => { row = v['data-row']; col = v['data-col'] || null; })" x-modelable="isOpen"

This effectively allows me to reactively bind to properties from the calling scope.
It seems to achieve the same goal as the purpose of this post.

My only issues is that I am watching $el._x_bindings, which is not a public property.
Should you decide to expose this in a, let's say, $bindings property, we have everything we need tp use multiple values and leave x-model alone. Seems like a simpler change to implement than messing with the x-model syntax.

The method above was the only one I found that allows me to reactively bind child x-data properties to properties from the parent scope.

By the way, tried watching $el directly and then just going for .dataset, but that may trigger recursive element errors when JSON.stringify is used to serialize the watched element.

What do you think?

[MichelJonkman]

This is fairly old by now but such a feature would help a lot!