vuejs

Loop through object on template Vuejs

javascript Share on :

//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.

Search Index Data (The code snippet can also be found with below search text)

loop on object vuejs template

Contribute to this Snippet

Was this helpful?

Created by :

@

Write your Comment

0 Comments

Similar code snippets

Create your own code snippets and search them using our portal and chrome extension

Programming Feeds

Learn something new everyday on Devsheet

Important Links

Join Devsheet Create new snippet Ask a Question Write an article Online JSON Viewer