Как реализовать поиск?

Question

[Analka]

Выводится список:

<div class="contact-list__items" v-if="dialogs.length > 0" v-for="(dialog, index) in dialogs" :data-id="dialog.id">
                                        <div class="contact-card"  @click.prevent="selectUser(dialog.id,index)">
                                            <a :href="'/profile/'+dialog.slug" target="_blank" class="contact-card__image"  v-bind:style='{ backgroundImage: `url("/storage/${dialog.avatar}")` }'></a>
                                            <div class="contact-card__data">
                                                <div class="contact-card__data--text">
                                                    <p class="username">{{dialog.fullname}}, {{dialog.age}} <span class="online ml" v-if="dialog.online === 1"></span></p>
                                                    <p class="last--massage" v-html="dialog.message"></p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

Есть поле поиска:

<div class="contact-list__search">
        <input type="text" placeholder="Введите имя" v-model="search">
        <button class="btn-search"><svg><use xlink:href="#search"></use></svg></button>
</div>

Как сделать, чтобы выводились элементы, чей fullname совпадает со значением в поле поиска? Если поле поиска пустое - выводится всё.

Пробую так, но не работает:

watch: {
            search(after, before) {
                this.searchUsers();
            }
        },

searchUsers(){
                console.log(this.search);
                return this.dialogs.filter((f, idx) => f.fullname == this.search);
            }

Answer 1

[Олег Колтунов]

Добавьте вычисляемое свойство, и используйте его в цикле

computed: {
    filteredDialogs: function () {
      let filtered = [...this.dialogs]
      return this.search === ''
        ? filtered
        : filtered.filter(c => c.fullname.toLowerCase().indexOf(this.search.toLocaleLowerCase()) > -1)
    }
  },

Comments

[Олег Колтунов]

Analka, что именно не работает?

[Analka]

Олег Колтунов, сделал, спасибо

Answer 2

[0xD34F]

Сделайте вычисляемое свойство, которое будет представлять отфильтрованный список, и выводите его:

computed: {
  filteredDialogs() {
    const { dialogs, search } = this;
    return search
      ? dialogs.filter(n => n.fullname.includes(search))
      : dialogs;
  },
},

И избавьтесь от v-if:

v-if="dialogs.length > 0" v-for="(dialog, index) in dialogs"

Во-первых - бессмысленно (если данных нет, и так ничего не будет выведено). Во-вторых.

Comments

[Analka]

а где его filteredDialogs вставить?

[0xD34F]

Analka, вместо dialogs выводите.

[Олег Колтунов]

v-for="(dialog, index) in dialogs" замените на v-for="(dialog, index) in filteredDialogs"

[Analka]

Олег Колтунов, да,сделал, спасибо

Answer 3

[Андрей Пике]

У меня линтер на такое точно ругается.
Не надо совмещать v-if и вложеннные в него v-for в одном блоке.
Надо разнести.
И сделать v-else, если нужно, когда ничего не соответствует (типа "Ничего нет").

Comments

[Андрей Пике]

Просто if (search === '' || search === null), то условие не выполняется, выводим всё. Если false - фильтруем.

[Андрей Пике]

Тут dialog надо прогонять через метод, который подхватывает dialog и возвращает массив в зависимости от search, и по ему итерируетесь. Или сделать отдельную переменную, и ловить watch на dialogs, но итерацию делать по на ней.

[Analka]

не понял

Не надо совмещать v-if и вложеннные в него v-for в одном блоке.

[Андрей Пике]

https://github.com/vuejs/eslint-plugin-vue/blob/ma...
Это костыль для вашего случая.
Не стоит в одном элементе это совмещать. Это рекомендации.
Просто обложить <div>, ни от кого не убудет.

ESlint/TSlint точно ругается на такое.