VUE3 reverse an array
Tags: vue, tutorial, beginners, javascript
Published: 2022-11-09 20:25:58

Let's say we have an array of objects inside **db.json** file and imagine this scenarios:

- In **Home.vue** we want to show only the last 5 jobs added
- In **AllJobs.vue** we want to show all jobs but starting with the newest ones

```json
{
  "jobs": [
    {
      "position": "1",
      "department": "test",
      "location": "test",
      "id": 1
    },
    {
      "position": "2",
      "department": "test",
      "location": "test",
      "id": 2
    },
    {
      "position": "4",
      "department": "test",
      "location": "test",
      "id": 4
    },
    {
      "position": "5",
      "department": "test",
      "location": "test",
      "id": 5
    },
    {
      "position": "6",
      "department": "test",
      "location": "test",
      "id": 6
    },
    {
      "position": "7",
      "department": "test",
      "location": "test",
      "id": 7
    }
}
```
Now it's time to render the array in both **Home.vue** & **AllJobs.vue**.
```vue
<div v-for="job in jobs" :key="job.id">
    <JobComponent />
</div>
```

As we said, in **Home.vue** we want to display only 5 jobs and we can use [slice()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice) for this.
```vue
<div v-for="job in jobs.slice(0, 5)" :key="job.id">
    <JobComponent />
</div>
```

Now, we want the jobs in reverse mode, because we want the latest job to be showed first. We are using [reverse()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reverse)
```vue
<div v-for="job in jobs.slice(0, 5).reverse()" :key="job.id">
    <JobComponent />
</div>
```

Next, in **AllJobs.vue** we want to show all jobs in reverse mode and the first thing that comes to mind is to use, again, **_reverse()_**, but this is not the right way to do it. If we take a look in our console we will see the next warning:

> <small><mark>[Vue warn]:</mark> Maximum recursive updates exceeded in component <AllJobs>. This means you have a reactive effect that is mutating its own dependencies and thus recursively triggering itself. Possible sources include component template, render function, updated hook or watcher source function.</small>
```
<div v-for="job in jobs.reverse()" :key="job.id">
    <JobComponent />
</div>
```
---
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yyb0m8z0x9me9efb8aem.gif)

---

Here is the catch, the right way to do this is to use both [slice()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice) & [reverse()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reverse) methods, because:

> <small>The slice() method returns a shallow copy of a portion of an array into a new array object selected from start to end (end not included) where start and end represent the index of items in that array. The original array will not be modified.</small>

```vue
<div v-for="job in jobs.slice().reverse()" :key="job.id">
    <JobComponent />
</div>
```
<small>**slice()** without any parameters because this time we don't want to shorten the array, we want to show the full array.</small>