Добавить элемент в массив, если он не существует в Vue.js/ES6.

Узнайте, как добавить элемент в массив, если он не существует JavaScript/Vue.js/ES6.

В этом примере есть массив объектов.

items: [
  { id: 1, text: "Item 1" },
  { id: 2, text: "Item 2" },
  { id: 3, text: "Item 3" }
]

Наша задача — добавить новый элемент «Item 4» с id 4 в массив элементов.

Vue.js

new Vue({
  el: "#app",
  data: {
    items: [
      { id: 1, text: "Item 1" },
      { id: 2, text: "Item 2" },
      { id: 3, text: "Item 3" }
    ],
    exists: null
  },
  methods: {
    addItem () {
      this.checkIfExists(4)
      if (!this.exists) {
      	this.items.push({'id': 4, 'text': 'Item 4' })
      }
    },
    checkIfExists(itemId) {
      this.exists = this.items.some((item) => {
      	return item.id === itemId
      })
    }
  }
})

HTML

<div id="app">
  <h2>Add item to array:></h2>
  <ul v-if="items.length > 0">
    <li v-for="item in items" :key="item.id">{{ item.text }}</li>
  </ul>
  <p><a href="#" @click.prevent="addItem()">Add new item</a></p>
</div>

Есть кнопка «Добавить новый элемент», которая связана с методом addItem(). Этот метод сначала вызывает метод checkIfExists(), чтобы узнать, содержит ли уже массив элементов элемент с id = 4.

Если он не существует, метод addItem() продолжает добавлять новый элемент в массив.

Я давно придумал это решение, оно не элегантное. Если вы знаете более короткий и понятный способ добавить элемент в массив и проверить, не содержит ли он уже этот элемент — сообщите мне.

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

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

PS: Обязательно ознакомьтесь с другими учебниками по JavaScript, например. как создать массив чисел в JavaScript или сгенерировать массив лет в JavaScript.

Первоначально опубликовано на https://renatello.com (Добавить элемент в массив, если он не существует в Vue.js/ES6) 4 августа 2019 г.