Как получить последний элемент в массиве Vue.js

В этом руководстве по Vue.js я покажу вам, как получить последний элемент массива с помощью метода slice().

Вы можете использовать метод slice(-1), который возвращает часть массива без изменения исходного массива. Это лучше, чем использование метода pop(), который изменяет длину исходного массива.

Пример Array.slice(-1)

Предположим, у вас есть массив элементов: YouTube, Spotify, Facebook и Snapchat. Если вы хотите получить последний элемент (Snapchat) и что-то с ним сделать (например, удалить), вы можете использовать метод Array​.prototype​.slice().

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>

Вывод:

Элементы:
YouTube
Spotify
Facebook
Snapchat

Последний элемент:
Snapchat

Пример массива объектов

Вы также можете использовать метод slice() с массивом объектов.

В этом примере у нас есть массив проектов. Каждый проект имеет название и статус проекта (is_active).

Мы получаем последний проект с помощью метода slice() в вычисляемом свойстве lastItem() и затем отображаем его в шаблоне.

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>

Вывод:

Проекты:
Проект S (неактивный)
Проект E (неактивный)
Проект Y (активный)
Проект X (активный)

Если вы найдете этот пост полезным, пожалуйста, дайте мне знать в комментариях ниже.
С уважением,
Ренат Галямов

Я основатель Wonder.store и MED24.KZ. Front-end разработчик с более чем 9-летним опытом построения бизнеса как совместно с основателями, так и крупными предприятиями.

Хотите поделиться этим с друзьями?
👉 renatello.com/vue-js-last-item-in-array

PS: Убедитесь, что вы проверяете другие сообщения, например. как проверить, прокрутил ли пользователь вниз в Vue.js, как сделать опрос Vue.js с помощью setInterval(), печатать объект JavaScript/Vue.js в консоли и как получить выбранный значение @change с помощью Vue.js

Подпишитесь на мою рассылку и не пропустите новый пост! Также не забудьте подписаться на мой YouTube канал!

Первоначально опубликовано на https://renatello.com —Как получить последний элемент в массиве Vue.js 29 апреля 2019 г.