Как сделать так, чтобы поисковый код фильтровал результаты только после нажатия кнопки

Question

Я нашел этот код на codepen и внес в него некоторые изменения. Я пытаюсь отфильтровать результаты после нажатия кнопки поиска. Но дело в том, что теперь он фильтруется мгновенно при вводе в поле поиска.

Вот код:

new Vue({
    el: '#app',
    data: {
        selected: [2],
        search: '',
        items: [{
                action: '15 min',
                headline: 'Brunch this weekend?',
                title: 'Ali Connors',
                subtitle: "I'll be in your neighborhood doing errands this weekend. Do you want to hang out?"
            },
            {
                action: '2 hr',
                headline: 'Summer BBQ',
                title: 'me, Scrott, Jennifer',
                subtitle: "Wish I could come, but I'm out of town this weekend."
            },
            {
                action: '6 hr',
                headline: 'Oui oui',
                title: 'Sandra Adams',
                subtitle: 'Do you have Paris recommendations? Have you ever been?'
            },
            {
                action: '12 hr',
                headline: 'Birthday gift',
                title: 'Trevor Hansen',
                subtitle: 'Have any ideas about what we should get Heidi for her birthday?'
            },
            {
                action: '18hr',
                headline: 'Recipe to try',
                title: 'Britta Holt',
                subtitle: 'We should eat this: Grate, Squash, Corn, and tomatillo Tacos.'
            }
        ]
    },
    computed: {
        filteredItems() {
            return _.orderBy(this.items.filter(item => {
              if(!this.search) return this.items;
                return (item.title.toLowerCase().includes(this.search.toLowerCase()) ||
                    item.action.toLowerCase().includes(this.search.toLowerCase())   ||
                    item.headline.toLowerCase().includes(this.search.toLowerCase()) ||
                    item.subtitle.toLowerCase().includes(this.search.toLowerCase()));
            }), 'headline');
        }
    },
    methods: {
      clearSearch () {
        this.search="";
      },
        toggle(index) {
            const i = this.selected.indexOf(index)

            if (i > -1) {
                this.selected.splice(i, 1)
            } else {
                this.selected.push(index)
            }
        }
    }
})

Я поделюсь полным кодом в комментарии, где вы можете увидеть полный рабочий пример. Как этот фильтр поиска может только после нажатия кнопки поиска?

Answer 1

Причина, по которой он фильтруется мгновенно при вводе в поле поиска, заключается в том, что filteredItems является вычисляемым свойством, которое означает, что оно будет запускаться каждый раз, когда изменяется значение search, то есть каждый раз, когда вы вводите новый символ.

Чтобы отфильтровать элементы только после нажатия кнопки, удалите filteredItems из computed и создайте функцию filterItems в вашем methods и присоедините этот обработчик к событию нажатия кнопки.

methods: {
  filterItems() {
    this.filteredItems = _.orderBy(
      this.items.filter(item => {
        if (!this.search) return this.items;
        return (
          item.title.toLowerCase().includes(this.search.toLowerCase()) ||
          item.action.toLowerCase().includes(this.search.toLowerCase()) ||
          item.headline.toLowerCase().includes(this.search.toLowerCase()) ||
          item.subtitle.toLowerCase().includes(this.search.toLowerCase())
        );
      }),
      "headline"
    );
  } 
}

<button type="button" class="btn btn-lg btn-danger" @click="filterItems">Search</button>

Обратите внимание, что я присвоил результат функции filteredItems это новое свойство, которое вы должны добавить к вашему data объекту.

Причина в том, что ваша filterItems функция не должна изменять исходный items, а создавать новый массив при выполнении, иначе это вызовет ошибку, если вы измените исходные элементы и попытаетесь отфильтровать его снова.

Итак, в вашем data объекте добавьте filteredItems, начальное значение которого будет равно items, так как оно еще не отфильтровано при монтировании вашего приложения.

const items = [];

new Vue({
  data: {
    filteredItems: items,
    items: items
  }
})

См. рабочая реализация .

Обратите внимание, что я также вызываю filterItems(), когда вы очищаете свой поиск, чтобы он сбрасывал данные, но вы можете просто удалить его из clearSearch(), если вы не хотите такого поведения.