Vue JS: Добавить элемент в избранное — пошаговое руководство

Создание кнопки «В Избранное»

Для добавления валютных пар в избранное создадим кнопку в компоненте Input. Скопируем существующую кнопку и изменим её текст на «В Избранное». Вызов функции добавления в избранное обозначим как Favorite. Функцию создадим позже. Для стилизации кнопки добавим класс f-button и отступ слева 20 пикселей:

.f-button {
  margin-left: 20px;
}

Функция добавления в избранное и массив избранных пар

В App.vue создадим функцию Favorite. Она будет добавлять текущие валютные пары в массив favs, хранящий избранные пары. Изначально favs пуст. Для начала просто выведем массив на экран; позже улучшим отображение. Функция Favorite использует метод push для добавления объектов с полями from (валюта конвертации) и to (валюта результата):

data() {
  return {
    favs: [],
  };
},
methods: {
  Favorite() {
    this.favs.push({ from: this.cryptoFirst, to: this.cryptoSecond });
  }
}

Компонент для отображения избранных пар

Создадим компонент Favorite.vue для отображения массива favs. В App.vue импортируем и используем этот компонент, отображая его, если длина массива favs больше нуля:

<!-- App.vue -->
<template>
  <Favorite :fs="favs" :get-from-fs="getFromFS"/>
</template>

<script>
import Favorite from './Favorite.vue';
export default {
  components: {
    Favorite
  },
  // ...
};
</script>

<!-- Favorite.vue -->
<template>
  <div v-if="fs.length > 0">
    <h2>Избранное</h2>
    <div>
      <div v-for="(element, index) in fs" :key="index">
        <span>{{ element.from }} - {{ element.to }}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Favorite',
  props: {
    fs: {
      type: Array,
      required: true,
    },
  },
};
</script>

Стили для Favorite.vue:

div {
  display: flex;
  justify-content: space-between;
  width: 500px;
  margin: 0 auto;
  /* ... другие стили */
}
h2 {
  color: white;
}

Выбор из избранного

Создадим метод getFromFS в App.vue. Он будет принимать индекс элемента из favs и устанавливать значения cryptoFirst и cryptoSecond. Передадим метод в компонент Favorite. В Favorite.vue добавим обработчик клика, вызывающий getFromFS с индексом выбранного элемента. В App.vue добавим обработку getFromFS:

//App.vue
methods: {
  getFromFS(index) {
    this.cryptoFirst = this.favs[index].from;
    this.cryptoSecond = this.favs[index].to;
  },
  // ...
}

<!-- Favorite.vue -->
<template>
  <div v-if="fs.length > 0">
    <h2>Избранное</h2>
    <div>
      <div v-for="(element, index) in fs" :key="index" @click="$emit('get-from-fs', index)">
        <span>{{ element.from }} - {{ element.to }}</span>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  // ...
  emits: ['get-from-fs']
};
</script>

При клике на элемент в избранном, значения будут подставляться в селекторы. Для корректной работы, передадим cryptoFirst и cryptoSecond в селекторы через общий prop, например, cryptNow. В селекторах будем использовать этот prop вместо current.

Реализован функционал добавления и выбора валютных пар из избранного, улучшив пользовательский интерфейс.