Vue 3 — v-for and Components
Tags: javascript, webdev, beginners, programming
Published: 2021-01-19 00:22:48

---
title: Vue 3 — v-for and Components
published: true
date: 2020-07-26 01:33:23 UTC
tags: javascript,webdev,beginner,programming
canonical_url: https://thewebdev.info/2020/07/26/vue-3%e2%80%8a-%e2%80%8av-for-and-components-2/?utm_source=rss&utm_medium=rss&utm_campaign=vue-3%25e2%2580%258a-%25e2%2580%258av-for-and-components-2
---

**Subscribe to my email list now at http://jauyeung.net/subscribe/**

**Follow me on Twitter at https://twitter.com/AuMayeung**

**Many more articles at https://medium.com/@hohanga**

**Even more articles at http://thewebdev.info/**

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.

The post [Vue 3 — v-for and Components](https://thewebdev.info/2020/07/26/vue-3%e2%80%8a-%e2%80%8av-for-and-components-2/) appeared first on [The Web Dev](https://thewebdev.info).