x-for behavior

[marcomilone]

Really sorry to make dummy questions (I've searched issues before making it btw).

<template x-for="item in items" :key="item">
    <div x-text="item"></div>
</template>

In case I modify array items on the fly... eg:
items.push("new_item_live");

should a new div pop up at the end of the div list?

<div x-text="item">new_item_live</div>

Thanks for the clarification... In my mind that was clearly bound to items changes, but in my application doesn't behave as I expected.

[ryangjchandler]

Hi @marcomilone,

Using native array methods can be unreliable due to the reactivity core used in Alpine. Instead of calling items.push, I'd instead do:

items = items.concat(['new_item_live'])

Since this is explicitly re-assigning the value of items, it will reliably trigger a re-render.

[marcomilone]

https://codepen.io/marcomilone/pen/abdbPxb

this works

is a matter of what I return
argh

[SimoTod]

You need to use this inside the function in your data context so the assignment goes through the reactive membrane otherwise it won't update.
Now, if you use a setInterval, inside the callback this is not what you would expect because of js things. So you need to assign this to another variable outside the setInterval and use that variable inside the callback

[SimoTod]

For example https://codepen.io/SimoTod/pen/bGEGzGM

[marcomilone]

Hello,
I use a lot of Intervals and Timeouts, so I need it badly.
I managed this way, changing very few lines.

var data = function() {

    var context=null;

    return {
     init: function(){
            context = this;
           // now I can use context everywhere
    }
}

[marcomilone]

Thanks a lot everybody