Поиск записей по клику на кнопку

Question

Всем привет! Нужна помощь, пытаюсь реализовать во vue поиск записей по нажатию на кнопку. Создал в methods функцию поиска и повесил её на кнопку. Ввожу поисковый запрос в input и кликаю на кнопку поиска, поиск отрабатывает, при повторном действии(ввода запроса + клик по кнопке), поиск больше не работает. Не могу понять в чем причина...

// template
<input type="text" v-model="searchText" />
<button @click="searchProducts"> 
<ul>
   <li v-for="(product, i) in products" :key="i">
       {{ product }}
   </li>
</ul>

// script
data() {
   return {
      searchText: '',
      products: [
         {
            title: 'Стол Оливиа',
            price: 3990,
            imgUrl: require('@/assets/images/olivia.png'),
            count: 17
         },
         {
            title: 'Стол Ацтека',
            price: 3650,
            imgUrl: require('@/assets/images/aztec.png'),
            count: 21
         },
         { 
            title: 'Стол Линда',
            price: 3744,
            imgUrl: require('@/assets/images/linda.png'),
            count: 18
         }
      ]
   }
},

methods: {
   searchProducts() {
      this.products = this.products.filter(product =>
         product.title.toLowerCase().includes(this.searchText.toLowerCase())
      )
   }
}

Answer 1

Можно попробовать решить вашу задачу без кнопки и с помощью вычисляемых свойств

new Vue({
    el: "#app",
    data: {
        search_text: '',
        products: [
            {
                title: 'Стол Оливиа',
                price: 3990,
                imgUrl: '',
                count: 17
            },
            {
                title: 'Стол Ацтека',
                price: 3650,
                imgUrl: '',
                count: 21
            },
            { 
                title: 'Стол Линда',
                price: 3744,
                imgUrl: '',
                count: 18
            }
        ]
    },
    computed: {
        productsWithSearch() {
            return this.products.filter(({ title }) => {
                return title.indexOf(this.search_text) !== -1;
            });
        }
    }
})

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
  color: #fff;
}

ul {
    margin-top: 20px;
}

ul li {
    margin-bottom: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
    <input type="text" v-model="search_text" />
    <ul>
       <li v-for="(product, index) in productsWithSearch" :key="index">
           {{ product.title }}
       </li>
    </ul>
</div>

Answer 2

Исправленный код:

new Vue({
  el: "#app",
  data: {
    searchText: '',
    filteredProducts: [],
    products: [{
        title: 'Стол Оливиа',
        price: 3990,
        imgUrl: '',
        count: 17
      },
      {
        title: 'Стол Ацтека',
        price: 3650,
        imgUrl: '',
        count: 21
      },
      {
        title: 'Стол Линда',
        price: 3744,
        imgUrl: '',
        count: 18
      }
    ]
  },

  methods: {
    searchProducts() {
      if (this.searchText) {
        this.filteredProducts = this.products.filter(product =>
          product.title.toLowerCase().includes(this.searchText.toLowerCase())
        )
      } else {
        this.filteredProducts = this.products
      }
    }
  },

  mounted() {
    this.filteredProducts = this.products
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div>
    <input type="text" v-model="searchText" />
    <button @click="searchProducts">Найти</button>
  </div>
  <ul>
    <li v-for="(product, i) in filteredProducts">
      {{ product.title }}
    </li>
  </ul>
</div>

БЛОГ НА HUSL

Поиск записей по клику на кнопку

Ответы (2 шт):