Vue Js Get Last Item From Array:  Vue.js is a popular  JavaScript framework used to build dynamic and reactive web applications. Here are five different methods to get the last item in an array using Vue.js:

Using the length property: This method accesses the last item in the array by subtracting 1 from the length of the array. It can be implemented as follows:

How to get last item from array in Vue Js?

The getlastItem() function in Vue.js is a method that retrieves the last item in an array (myArray). The function first determines the length of myArray using the length property and then subtracts 1 from it to get the index of the last item. The last item is then assigned to the lastItem variable using the array index. This function can be used in Vue.js to retrieve the last item in an array for further processing or display. It is a simple and efficient way to access the last element in an array without having to loop through the entire array.

Vue Js Get Last Item fromArray Example

<div id="app">
     <p>myArray:{{myArray}}</p>
     <p v-if="lastItem">{{lastItem}}</p>
     <button @click="getlastItem">Last Item</button>
</div>
   <script type="module">
        const app = Vue.createApp({
            data() {
                return {
                    myArray: ['1', '2', '3', '4', '5'],
                    lastItem: ''
                };
            },
            methods: {
                getlastItem() {
                    this.lastItem = this.myArray[this.myArray.length - 1];
                },
            },
        });
        app.mount('#app');
 </script>

Using the slice method: This method creates a new array with the last 5 item of the original array.

How to get last 5 items from an array in Vue Js

To get the last 5 items from an array in Vue.js, you can use the slice method along with the negative index syntax to extract the last 5 elements.In this example, the items data property contains an array of 10 objects. The lastFiveItems computed property returns a new array that contains the last 5 items from the items array using the slice method with a negative index. The v-for directive in the template loops through the lastFiveItems array to render each item.

Vue Js Get Last 5 item from Array Example

<div id="app">
        <ul>
            <li v-for="item in lastFiveItems" :key="item.id">
                {{ item.name }}
            </li>
        </ul>
</div>
  <script type="module">
        const app = Vue.createApp({
            data() {
                return {
                    items: [
                        { id: 1, name: 'Item 1' },
                        { id: 2, name: 'Item 2' },
                        { id: 3, name: 'Item 3' },
                        { id: 4, name: 'Item 4' },
                        { id: 5, name: 'Item 5' },
                        { id: 6, name: 'Item 6' },
                        { id: 7, name: 'Item 7' },
                        { id: 8, name: 'Item 8' },
                        { id: 9, name: 'Item 9' },
                        { id: 10, name: 'Item 10' },
                    ]

                };
            },
            computed: {
                lastFiveItems() {
                    return this.items.slice(-5).reverse()
                }
            }
        });
        app.mount('#app');
 </script>

Using the pop method: This method removes the last item from the array and returns it. It can be implemented as follows:

const lastItem = myArray.pop();

Using the spread operator: This method creates a new array with all the items from the original array, and then accesses the last item from the new array. It can be implemented as follows:

const lastItem = [...myArray].pop();

Using the reduce method: This method reduces the array to a single value by iterating over each item, and then returns the last item. It can be implemented as follows:

const lastItem = myArray.reduce((_, currentItem) => currentItem);