If we consider the scenario where "category" is a string because it acts as the key in a dictionary.
Let's think of this as "value and key" instead of "count and category":
<div v-for="(value, key) in products[product]">
To facilitate sorting, you can first convert to an array, sort it, and then use it with v-for:
<div v-for="(product) in Object.keys(products).sort()" :key="product">
<div v-for="(category) in Object.keys(products[product]).sort()" :key="category">
<div>{{ category }}</div>
<div>{{ Number(products[product][category]).toLocaleString() }}</div>
</div>
</div>
For more information, visit: https://vuejs.org/guide/essentials/list.html#v-for-with-an-object
Note: Avoid performing computations like sorting directly in the template as they can be costly, as pointed out by Estus Flask.
If you don't need direct access to the category with syntax like:
Products["shoes"]
You can organize data in a sorted manner using a different structure, for example:
const products: Category[] = [
{
"name": "shoes",
"categories": [
{ "name": "shoes4athletes", "value": 57 },
{ "name": "shoes4kids", "value": 3000 },
{ "name": "shoes4men", "value": 1402 },
{ "name": "shoes4women", "value": 99 }
]
}
]
<div v-for="(product) in products" :key="product.name">
<div v-for="(category) in product.categories" :key="category.name">
<div>{{ category.name }}</div>
<div>{{ Number(category.value).toLocaleString() }}</div>
</div>
</div>