DEV Community

John Au-Yeung
John Au-Yeung

Posted on • Originally published at thewebdev.info on

Vue 3 — v-for

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>

Enter fullscreen mode Exit fullscreen mode

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>

Enter fullscreen mode Exit fullscreen mode

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>

Enter fullscreen mode Exit fullscreen mode

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>

Enter fullscreen mode Exit fullscreen mode

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>

Enter fullscreen mode Exit fullscreen mode

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>

Enter fullscreen mode Exit fullscreen mode

Conclusion

We can render objects and arrays with the v-for directive.

The post Vue 3 — v-for appeared first on The Web Dev.

Top comments (0)