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.