Chrome Extension

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>
We are a bunch of lazy programmers so we developed this chrome extension
search code from your favorite search engine
Install Now
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
Was this helpful?
0 Comments
Open Code Manager We are hiring