Задать вопрос
@eldenhard2
vue

Как реализовать поиск по массиву с последующем добавлением класса соответствующим объектам?

Требуется создать приложение, выводящее список email из массива emails. которое позволяет выполнять поиск по этому списку. email в списке, которые содержат строку из поля поиска, должны выделяться классом 

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="/assets/styles/index.css" />
    <title>MarkedList</title>
    <style>
      .marked {
        color: #efc14e;
      }
    </style>
  </head>
  <body>
    <div id="app" style="margin-top: 2rem">
      <div class="container">
        <div class="form-group">
          <input type="search" v-model="search"/>
        </div>
        <ul v-for="email in emails">
          <li :class="{ marked: isActive }">{{email}}</li>
        </ul>

      </div>
    </div>
   
    <script type="module" src="./script.js"></script>
  </body>
</html>


let vm = createApp({
  data(){
    return{
      emails:[
        'Eliseo@gardner.biz',
        'Jayne_Kuhic@sydney.com',
        'Nikita@garfield.biz',
        'Lew@alysha.tv',
        'Hayden@althea.biz',
        'Presley.Mueller@myrl.com',
        'Dallas@ole.me',
        'Mallory_Kunze@marie.org',
        'Meghan_Littel@rene.us',
        'Carmen_Keeling@caroline.name',
        'Veronica_Goodwin@timmothy.net',
        'Oswald.Vandervort@leanne.org',
        'Kariane@jadyn.tv',
        'Nathan@solon.io',
        'Maynard.Hodkiewicz@roberta.com',
        'Christine@ayana.info',
        'Preston_Hudson@blaise.tv',
        'Vincenza_Klocko@albertha.name',
        'Madelynn.Gorczany@darion.biz',
        'Mariana_Orn@preston.org',
        'Noemie@marques.me',
        'Khalil@emile.co.uk',
        'Sophia@arianna.co.uk',
        'Jeffery@juwan.us',
        'Isaias_Kuhic@jarrett.net',
      ],
      search: '',
      isActive: false
    }
  },
  computed: {
    SearchEmail(){
       this.emails.filter(function (email) {
        return email.class = "marked"
      })
    },

  }
    
}).mount('#app')
  • Вопрос задан
  • 141 просмотр
Комментировать
Подписаться 1 Простой Комментировать
Решения вопроса 2
0xD34F
@0xD34F Куратор тега Vue.js 
computed: {
  bullshitEmails() {
    const search = this.search.trim().toLowerCase();
    return this.emails.map(n => ({
      email: n,
      marked: !!search && n.toLowerCase().includes(search),
    }));
  },
},

<ul>
  <li
    v-for="{ email, marked } in bullshitEmails"
    v-text="email"
    :class="{ marked }"
  ></li>
</ul>
Ответ написан
Комментировать
Комментировать
sergiks
@sergiks
♬♬
Сделайте computed свойство emailObjects
которое получается из исходного массива emails примерно так:
emailObjects() {
  return this.emails.map(email => ({
    email,
    isActive: email.includes(this.search),
  });
},
т.е. тут вместо массива просто-email'ов делается массив объектов, где и email и свойство isActive, которое для данного адреса означает, включает он искомое или нет.
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Frontend Vue & Capacitor Developer Middle++
Parasol Software
от 2 000 до 2 500 $
Разработчик Vue.js
Кортекс
от 60 000 до 100 000 ₽
Разработчик (Frontend developer / Vue.js)
МСтрой
от 99 999 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Взлом автомобильной программы
19 апр. 2024, в 05:01
999999 руб./за проект
Доработать телеграм бота
19 апр. 2024, в 03:52
1000 руб./за проект
Написать код на python
19 апр. 2024, в 03:01
1000 руб./за проект
Ещё заказы