How to get the last item in Vue.js array

in Code Write a comment

In this Vue.js tutorial, I’ll show you how to get the last item of an array using the slice() method.

You can use the slice(-1) method, which returns a part of an array, without modifying the original array. Which makes it better than using the pop() method, which changes the length of the original array.

Array.slice(-1) example

Suppose you have an array of items: YouTube, Spotify, Facebook and Snapchat. If you want to get the last item (Snapchat) and do something with it (e.g. delete it), you can use the Array​.prototype​.slice() method.

new Vue({
  el: "#app",
  data: {
    items: ['YouTube', 'Spotify', 'Facebook', 'Snapchat']
  },
  computed: {
  	lastItem() {
    	return this.items.slice(-1)[0]
    }
  }
})

HTML:

<div id="app">
  <h2>Items:
  <ul>
    <li v-for="item in items">
      {{ item }}
    </li>
  </ul>
  <br>
  
  <h2>Last item:
  <ul>
    <li>{{ lastItem }}
  </ul>
</div>

Output:

Items:
YouTube
Spotify
Facebook
Snapchat

Last item:
Snapchat

Array of objects example

You can also use the slice() method with an array of objects.

In this example we have an array of projects. Each project has a title and project status (is_active).

We get the last project using the slice() method in the computed property lastItem() and then display it in the template.

new Vue({
  el: "#app",
  data: {
    items: [
      { title: "Project S", is_active: false },
      { title: "Project E", is_active: false },
      { title: "Project Y", is_active: true },
      { title: "Project X", is_active: true }
    ]
  },
  computed: {
  	lastItem() {
    	return this.items.slice(-1)[0]
    }
  }
})

HTML:

<div id="app">
  <h2>Projects:
  <ul>
    <li v-for="item in items">
      <label>
        {{ item.title }}
        <span v-if="item.is_active">
          (active)
        </span>
        <span v-else>
          (inactive)
        </span>
      </label>
    </li>
  </ul>
  <br>
  
  <h2>Last project:
  <ul>
    <li>{{ lastItem.title }}
  </ul>
</div>

Output:

Projects:
Project S (inactive)
Project E (inactive)
Project Y (active)
Project X (active)

Last project:
Project X

If you find this post useful, please let me know in the comments below. 
Cheers,
Renat Galyamov

Want to share this with your friends?
👉renatello.com/vue-js-last-item-in-array

PS: Make sure you check other posts e.g. how to check if a user has scrolled to the bottom in Vue.js, how to do Vue.js polling using setInterval(), JavaScript/Vue.js print object in the console and how to get selected value on @change using Vue.js


Renat Galyamov

Hi, I'm Renat Galyamov

I'm a founder of Wonder.store and MED24.KZ.

A front-end developer with over 9 years of experience building businesses together with founders as well as large enterprises, such as Accenture, The British Museum, Admiral, Kimberley Process, 21st Century Fox and many others.

Subscribe to get my best articles in your inbox first


Join hundreds of weekly readers

I share my coding tips 💻, write about useful services ✌️ and share photos from beautiful places ⛰️



Write a Comment

Comment