Vue 3 is in beta and it’s subject to change.
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 and objects with v-for .
v-if with v-for
We shouldn’t use v-if and v-for together.
This is because v-for renders everything and then v-if checks every item whether they need to be rendered.
Instead, we should filter out the items beforehand with computed properties and use that with v-for .
When they’re used together, v-for has higher priority over v-if .
List Rendering
We can render an array of items onto the screen with v-for .
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">
<div v-for="p in people">
{{ p.name }}
</div>
</div>
<script>
const vm = Vue.createApp({
data() {
return {
people: [{ name: "mary" }, { name: "james" }, { name: "jane" }]
};
}
}).mount("#app");
</script>
</body>
</html>
to render the items in the people array onto the screen.
We use the v-for directive to loop through each entry and render each item onto the screen.
We can also get the index of the item by writing:
<!DOCTYPE html>
<html lang="en">
<head>
<title>App</title>
<script src="https://unpkg._com_/vue@next"></script>
</head>
<body>
<div id="app">
<div v-for="(p, index) in people">
{{index}} - {{ p.name }}
</div>
</div>
<script>
const vm = Vue.createApp({
data() {
return {
people: [{ name: "mary" }, { name: "james" }, { name: "jane" }]
};
}
}).mount("#app");
</script>
</body>
</html>
Then we get the index of the item with index.
We used in to loop through the array, but we can replace in with of to make it resemble the for-of loop:
<div v-for="p of people"></div>
v-for with an Object
v-for also works for objects.
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 v-for="value in obj">
{{value}}
</div>
</div>
<script>
const vm = Vue.createApp({
data() {
return {
obj: {
james: 20,
mary: 30,
jane: 10
}
};
}
}).mount("#app");
</script>
</body>
</html>
to loop through the values of an object and display each value.
To get the key, we can add a second parameter to the loop:
<!DOCTYPE html>
<html lang="en">
<head>
<title>App</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
<div v-for="(value, name) in obj">
{{name}}: {{value}}
</div>
</div>
<script>
const vm = Vue.createApp({
data() {
return {
obj: {
james: 20,
mary: 30,
jane: 10
}
};
}
}).mount("#app");
</script>
</body>
</html>
name has the key of the object.
The 3rd item in the comma-separated list is the index:
<!DOCTYPE html>
<html lang="en">
<head>
<title>App</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
<div v-for="(value, name, index) in obj">
{{index}} - {{name}}: {{value}}
</div>
</div>
<script>
const vm = Vue.createApp({
data() {
return {
obj: {
james: 20,
mary: 30,
jane: 10
}
};
}
}).mount("#app");
</script>
</body>
</html>
Conclusion
We can render objects and arrays with the v-for directive.
