CODEWITHSUNDEEP
alpine.js
anjanesh
anjanesh

Reputation: 4261

How does alpineJS re-reder a template on data update?

How does AlpineJS re-render a template ?

<script>let contacts = [];</script>
<div x-data="{ persons: contacts }">
    <template x-for=" person in persons ">
        <div x-text=" person "></div>
    </template>            
    <button x-on:click="contacts.push('Jack'); persons = contacts; console.log(persons.length);">Click</button>
</div>

I was expecting the div to have multiple text of Jack on click.

Upvotes: 1

Views: 5361

Answers (2)

bloodeyes
bloodeyes

Reputation: 56

Maybe it's not the most efficient way but I've had a similar problem, to resolve it I used the get function inspired from this.

My use case is the following:

JS:

get updatedState() {
      var config_state = [];
      #update your data here 
      return config_state;
}

HTML:

<template x-for="config in updatedState">
#Do what you want here
</template>

Each time your data changes, your loop will update the data

Upvotes: 1

Karim Tarek
Karim Tarek

Reputation: 907

In your case/example contacts are out of Alpine's scope, once the component is initiated it's in it's own bubble, anything outside out the component scope x-data won't trigger a re-render.

If you change contacts.push('Jack'); to persons.push('Jack');, that will trigger a re-render.

Upvotes: 1

Related Questions