how to sort array with x-for in template?

[atulmahankal]

code:

<ul x-data="{ fruites: ['Banana', 'Mango', 'Apple'] }">
    <template x-for="fruite in fruites">
        <li x-text="fruite"></li>
    </template>
</ul>

Result:

• Banana
• Mango
• Apple

Required:
for assending

• Apple
• Banana
• Mango

for desending

• Mango
• Banana
• Apple

How can I do that?

Thanks in advance.

[ekwoka]

The same way you do in JS.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort