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

---
title: Vue 3 — v-for and Arrays
published: true
date: 2020-07-26 01:32:43 UTC
tags: javascript,webdev,beginner,programming
canonical_url: https://thewebdev.info/2020/07/26/vue-3%e2%80%8a-%e2%80%8av-for-and-arrays-2/?utm_source=rss&utm_medium=rss&utm_campaign=vue-3%25e2%2580%258a-%25e2%2580%258av-for-and-arrays-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` .

### Maintaining State

When `v-for` re-renders a list, the items are patched in place.

When then items change, the existing items are updated.

However, this means when the items re-render, their state will be cleared.

Therefore, patching is only suitable when we render a list that doesn’t rely on child component state or temporary DOM state.

To let Vue know the identity of an item, we should add a `key` prop to each rendered item so that Vue can reuse and reorder existing elements.

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" :key="p.id">
        {{ p.name }}
      </div>
    </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>

```

to render a list from the `people` array.

We passed in a unique ID to the `key` prop to make sure that the ID stays the same no matter what order the items are in.

Only primitive values should be used as key values.

So we can use strings or numbers like in the example.

### Array Change Detection

Vue 3 wraps array mutation methods so they also trigger view updates.

The wrapped methods include:

- `push()`
- `pop()`
- `shift()`
- `unshift()`
- `splice()`
- `sort()`
- `reverse()`

They’ll all trigger Vue to update the rendered list when they’re called.

### Replacing an Array

Methods that return a new array don’t trigger Vue to update the rendered list because they return a new array.

Therefore, we need to assign the returned array to the original value.

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">
      <input v-model="name" @keydown="search" />
      <div v-for="p in people" :key="p.id">
        {{ p.name }}
      </div>
    </div>
    <script>
      const vm = Vue.createApp({
        data() {
          return {
            name: "",
            people: [
              { id: 1, name: "mary" },
              { id: 2, name: "james" },
              { id: 3, name: "jane" }
            ]
          };
        },
        mounted() {
          this.orig = JSON.parse(JSON.stringify(this.people));
        },
        methods: {
          search() {
            if (this.name.length > 0) {
              this.people = this.people.filter(item =>
                item.name.match(new RegExp(this.name, "g"))
              );
            } else {
              this.people = this.orig;
            }
          }
        }
      }).mount("#app");
    </script>
  </body>
</html>

```

We called the `filter` method to filter items according to the inputted value.

So we’ve set the returned value to the `this.people` property so that the new value will be rendered.

### Displaying Filtered/Sorted Results

If we want to display filtered or sorted results, we can do this with computed properties.

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">
      <p v-for="n in oddNumbers">{{ n }}</p>
    </div>
    <script>
      const vm = Vue.createApp({
        data() {
          return {
            numbers: [1, 2, 3, 4, 5]
          };
        },
        computed: {
          oddNumbers() {
            return this.numbers.filter(number => number % 2 === 1);
          }
        }
      }).mount("#app");
    </script>
  </body>
</html>

```

to return an array of odd numbers in the computed property `oddNumbers` .

Then we can render `oddNumbers` instead of the original `number` array and using `v-if` to do the filtering.

### Conclusion

We can use computed properties to display filtered values.

Array methods that mutate the array will trigger re-render when they’re called.

Array methods that return the new array will need to have their returned value assigned to an instance variable for them to be rendered.

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