Blog>
Snippets

Using v-for with an Object

Demonstrate how to iterate over an object's properties and render a list in Vue.js.
<template>
  <div>
    <!-- Use v-for to iterate over the object's properties and display them -->
    <ul>
      <li v-for="(value, key) in myObject" :key="key">
        {{ key }}: {{ value }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // Sample object to iterate over
      myObject: {
        firstName: 'John',
        lastName: 'Doe',
        age: 30
      }
    };
  }
};
</script>
This Vue.js code snippet includes a template that uses the v-for directive to iterate over each property of a 'myObject' data object. It renders an unordered list where each list item displays a key-value pair from the object. The script section declares the Vue component and provides 'myObject' with some sample data to be rendered by the template.