Vue 3 — v-for
Tags: vue, webdev, beginners, javascript
Published: 2020-10-17 01:03:18

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

**Check out my books on Amazon at https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62**

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

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.

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