[Vuejs]-Property `sort` does not exit on type

by

2👍

In that case, "category" is a string because it is the key in a dictionary.

Consider that instead of "count and category" this is "value and key":

<div v-for="(value, key) in products[product]">

If you want to sort, you can convert to an array first, sort, and use it on 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>

see: https://vuejs.org/guide/essentials/list.html#v-for-with-an-object

edit: As pointed out by Estus Flask, I should have avoided doing computations, such as sorting, at the template. Also, sorting can be expensive.

If you do not need direct access to the category, like:

Products["shoes"]

You can use a different structure to keep the data sorted, 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>

Leave a comment