Intermediate

Reactive Product Search

In this challenge, you must implement the search logic for a product list. The user will type in a text field, and the list should automatically update to show only the products that match the name (ignoring case sensitivity). If the input field is empty, all products should be displayed. If there are no matches, a message stating that no results were found must be shown.


Objectives

  • Bind the search input to the state using v-model.
  • Implement a computed property that filters the product array based on the search term.
  • Ensure the search is case-insensitive.
  • Conditionally display the 'No products found' message when the filtered list is empty.
Gallery