use and x-for item with x-model

[shadoWalker89]

Hi,

Currently it's not possible to bind an item of an array using x-model

This will not work

items = ['foo', 'bar'];

<template x-for="item in items">
<input x-model="item"/>
</template>

When i type in the input the item value doesn't change

Edit: The same thing works in vue

[rzenkov]

This is because you pass item by value, you need model witch passes by reference.
Try this:

<div x-data="{models:[{name:''}, {name: ''}]}">
    <template x-for="model in models">
      <input type="text" x-model="model.name">
    </template>
    <button @click="alert(JSON.stringify(models))">Show</button>
</div>

[shadoWalker89]

@rzenkov But that same code will work in vue. just replace the x- with the v- and you will see

[rzenkov]

Yes, but x-for in alpine has that design now. Imho x-for is compromise between alpine way and necessity for doing things like this example.

You get to keep your DOM, and sprinkle in behavior as you see fit.

[calebporzio]

I haven't really wrapped my head around this, does anyone know if this is possible given the current approach (even if we made minor adjustments to the codebase?)

I guess without diving in myself, I'm hoping someone can do the homework and explain why or why not this is possible, and what it would take.

Thanks!

[SimoTod]

@calebporzio ^ this patch should solve the issue. I added a bit of context in the PR description.

Codepen: https://codepen.io/SimoTod/pen/MWYMyGP

Are you okay with me sending another couple of PRs in the next few days to make it consistent with VueJS?

I would add support for looping on object properties (like https://vuejs.org/v2/guide/list.html#v-for-with-an-Object) and for (item, index) in items/(item, name , index) in items so we can print index/name inside each item.

[ryangjchandler]

Hey guys, is there anything left to say on this issue?

I don't believe the original post is necessarily a bug / problem with Alpine, since a scalar value is being used for the x-model directive, it doesn't get passed by reference.

This can be worked around by using the array index instead:

<template x-for="(item, index) in items">
    <input x-model="items[index]" />
</template>

(or see CodePen here: https://codepen.io/ryangjchandler/pen/vYGBgKy)

[ryangjchandler]

Hey guys, I'm going to close this issue now. Please see my comment above about how it can work with arrays at the moment. If you think this is something that Alpine should definitely handle, please open a new Discussion which is where we try to keep all of our feature requests now. Cheers! 🙂