How can I change x-data after a component is rendered?

[ragjunk]

I have components that initialize with x-data (and x-init in some cases), but the "data" can change based on user interaction. For example, sorting a table based on the sort order selected. I didn't find any examples or documentation on how the data can be changed after a component has rendered. Is there a way to "set" the data to force re-rendering of the component?

[mblarsen]

You can use any variable on the x-data object on the children of the element you stick it on.

E.g.

<div x-data="{sortOrder: 'asc'}">
   <button x-on:click.prevent="sortOrder = sortOrder === 'asc' ? 'desc' : 'asc'">Toggle sort order</button>
</div>

[ragjunk]

Thanks for the quick response, but that was not my question. Maybe, I didn't phrase my question right. Based on certain user action, such as "toggle" above, x-data itself changes. For example:

<div x-data="{sortOrder: 'asc', data: [1,2,3,4]}"> may become:

<div x-data="{sortOrder: 'desc', data: [4,3,2,1]}">

For simplicity, I listed data as a simple array, but it is the data that drives the content of this <div>. In other words, x-data that drives this <div> changes, so the question is how can set this new data for this div?

[SimoTod]

I think the response was correct. As a consequence of the action, you can mutate any properties inside your x-data and the component will react accordingly.
This is basically the main feature of the library.
For example

<div x-data="{sortOrder: 'asc', data: [1,2,3,4]}">
   <button x-on:click="data = [4,3,2,1]">click me</button>
    <template x-for="item in data">
        <div x-text="item"></div>
    </template>
</div>

[SimoTod]

If you mean completely change x-data, you can't (and you shouldn't). At that point it will be a completely different component so you may as well create a new one and let the mutation observer initialise it. Do you expect the whole x-data to change? It seems a bit weird, do you have a concrete example?

[ragjunk]

<button x-on:click="data = [4,3,2,1]">click me</button> does it! Thanks!

[SimoTod]

https://github.com/alpinejs/alpine/blob/master/README.md#x-on