Question - What is the purpose of using v-for directive in Vue.js?
Answer -
In Vue.js, the v-for directive is used because it allows us to loop through items in an array or object. By using this directive, we can iterate on each element in the array or object.
Example of v-for directive usage in Array:
{{ index }} - {{ item.message }}
var vm = new Vue({
el: '#list',
data: {
items: [
{ message: 'Alex' },
{ message: 'Muler' }
]
}
})
We can also use the delimiter instead of in, similar to JavaScript iterators.
Example of v-for directive usage in Object:
{{ index }}. {{ key }}: {{ value }}
var vm = new Vue({
el: '#object',
data: {
user: {
firstName: 'Alex',
lastName: 'Muller',
age: 30
}
}
})