Задать вопрос
@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')
  • Вопрос задан
  • 170 просмотров
Комментировать
Подписаться 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 Developer (Vue/Nuxt)
tactic.team
от 140 000 до 180 000 ₽
Frontend разработчик (Vue)
Creatium
от 150 000 ₽
😃 Frontend developer Vue 💻📱⌚️
Viletech • Москва
от 150 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Отрисовать дизайн веб-страницы генерации математических примеров
23 нояб. 2024, в 16:00
10000 руб./за проект
Сделать бот программу для браузерной игры
23 нояб. 2024, в 15:17
5000 руб./за проект
Сделать баннеры для рекламы
23 нояб. 2024, в 14:26
5000 руб./за проект
Ещё заказы