Loop through object on template Vuejs

//If OBJECT IS AS BELOW
const fruits = {
    "name": "Mango",
    "color": "Yellow",
    "taste": "sweet",
    "quantity": 10
};

<div v-for="(value, key) in fruits" :key="key">
    <div>{{ key }} - {{value}}</div>
</div>

Output

name - Mango
color - Yellow
taste - sweet
quantity - 10

In Vuejs you can use v-for to iterate through array items as well as object properties. You can iterate through each key value pair of object and get its value inside loop.

In the code snippet, we have an object name as fruits which have several properties like name, color, etc. We are printing its key and value using v-for in Vuejs template.

Was this helpful?