Vue 3 is the up and coming version of Vue front end framework.
It builds on the popularity and ease of use of Vue 2.
In this article, we’ll look at rendering arrays with v-for .
Methods
We can use methods to render with v-for as long as the method returns an array or an object.
For instance, we can write:
<!DOCTYPE html>
<html lang="en">
<head>
<title>App</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
<ul v-for="numbers in sets">
<li v-for="n in odd(numbers)">{{ n }}</li>
</ul>
</div>
<script>
const vm = Vue.createApp({
data() {
return {
sets: [[1, 2, 3, 4, 5], [6, 7, 8, 9, 10]]
};
},
methods: {
odd(numbers) {
return numbers.filter(number => number % 2 === 1);
}
}
}).mount("#app");
</script>
</body>
</html>
to get the odd numbers from each nested array and render them.
The odd method takes a number array and returns an array with the odd ones, so we can use it with v-for .
v-for with a Range
v-for can be used to render a range of numbers.
For instance, we can write:
<!DOCTYPE html>
<html lang="en">
<head>
<title>App</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
<div id="range">
<p v-for="n in 100">{{ n }}</p>
</div>
</div>
<script>
const vm = Vue.createApp({}).mount("#app");
</script>
</body>
</html>
n in 100 will render a list of numbers from 1 to 100.
v-for on a <template>
v-for can be used on the template element to let us render a group of items.
For example, we can write:
<!DOCTYPE html>
<html lang="en">
<head>
<title>App</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
<template v-for="p in people">
<p>{{ p.name }}</p>
<hr />
</template>
</div>
<script>
const vm = Vue.createApp({
data() {
return {
people: [
{ id: 1, name: "mary" },
{ id: 2, name: "james" },
{ id: 3, name: "jane" }
]
};
}
}).mount("#app");
</script>
</body>
</html>
We have the p and hr elements rendered in a group in the template tag.
This way, we can render multiple items in a group.
v-for with a Component
v-for can be used with components.
For instance, we can write:
<!DOCTYPE html>
<html lang="en">
<head>
<title>App</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
<person v-for="p in people" :person="p" :key="p.id"> </person>
</div>
<script>
const app = Vue.createApp({
data() {
return {
people: [
{ id: 1, name: "mary" },
{ id: 2, name: "james" },
{ id: 3, name: "jane" }
]
};
}
});
app.component("person", {
props: ["person"],
template: `
<p>{{ person.name }}</p>
<hr />
`
});
app.mount("#app");
</script>
</body>
</html>
to create a component called person .
It takes the person prop, which are objects in the people array.
Then we pass in each people entry as the value of the person prop.
The items in the component are rendered as the v-for loop runs.
The data isn’t automatically injected into the component since it makes the coupling tight between the child and the parent component.
Conclusion
We can render arrays and objects returned from methods.
